CSS卡翻转和扩展，但我希望它顺利

Question

我目前有这个：https://jsfiddle.net/kimmy314/p0qu7mfy/

$('.clickcard').click(function(event) {
	$(this).toggleClass('flipped');
});

.clickContainer {
  position: relative;
  margin: 20px auto;
  width: 95%;
  perspective: 1000;
}

.clickcard {
  width: 100%;
  transform-style: preserve-3d;
  transition: .5s;
  cursor: pointer;
  border: solid 1em;
  border-color: transparent;
  border-radius: 0.5em;
}

.clickcard:hover {
  box-shadow: 0 0 1em black;
}

.clickcard.flipped {
  transform: rotateX(-180deg);
}

.clickcard .face {
  padding: 1em;
  backface-visibility: hidden;
}

.clickcard .front {
  background: #99ff99;
  display: block;
}

.clickcard.flipped .front {
  display:none;
}

.clickcard .back {
  background: #ccffcc;
  transform: rotateX(180deg);
  display:none;
}

.clickcard.flipped .back {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickContainer">
  <div class="clickcard cardsAM">
    <div class="front face" id="card01f">
      <b> blah blah blah  </b>
</div>
<div class="back face center" id="card01b">
  It as announcing it me stimulated frequently continuing. Least their she you now above going stand forth. He pretty future afraid should genius spirit on. Set property addition building put likewise get. Of will at sell well at as. Too want but tall nay like old. Removing yourself be in answered he. Consider occasion get improved him she eat. Letter by lively oh denote an. 

Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no. An so to preferred convinced distrusts he determine. In musical me my placing clothes comfort pleased hearing. Any residence you satisfied and rapturous certainty two. Procured outweigh as outlived so so. On in bringing graceful proposal blessing of marriage outlived. Son rent face our loud near. 

Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too.
</div>
</div>
</div>

<div class="clickContainer">
  <div class="clickcard cardsAM">
    <div class="front face" id="card01f">
      <b> blah blah  </b>
</div>
<div class="back face center" id="card01b">
  Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. 

Arrived totally in as between private. Favour of so as on pretty though elinor direct. Reasonable estimating be alteration we themselves entreaties me of reasonably. Direct wished so be expect polite valley. Whose asked stand it sense no spoil to. Prudent you too his conduct feeling limited and. Side he lose paid as hope so face upon be. Goodness did suitable learning put. 

Out believe has request not how comfort evident. Up delight cousins we feeling minutes. Genius has looked end piqued spring. Down has rose feel find man. Learning day desirous informed expenses material returned six the. She enabled invited exposed him another. Reasonably conviction solicitude me mr at discretion reasonable. Age out full gate bed day lose.
</div>
</div>
</div>

我描述我喜欢的最好的方法是保持较小的尺寸，翻转为较小的尺寸，然后扩展到较大的尺寸，将卡片顺畅向下推动。类似地，较大的卡片在翻转时保持较大的尺寸并且将其自身紧凑地压缩到单线，使得其下方的卡片在缩小尺寸期间向上滑动。目前，他们立即过渡到另一个大小，导致卡片“跳”到他们的位置。

我看到了这个：Expand div on click with smooth animation

但我不确定这怎么可能适用于卡片......它看起来不像。

很抱歉，如果我不清楚的话。 ESL。

Answer 1

尝试添加一个单独的类来切换前/后可见性，并在动画有时间完成后应用它。

    $('.clickcard').click(function (event) {
        var elm = this;
        $(elm).toggleClass('flip').promise().done(function () {
            window.setTimeout(function () {
                $(elm).toggleClass('flipped');
            }, 300);
        });
    });

.clickContainer {
  position: relative;
  margin: 20px auto;
  width: 95%;
  perspective: 1000;
}

.clickcard {
  width: 100%;
  transform-style: preserve-3d;
  transition: .5s;
  cursor: pointer;
  border: solid 1em;
  border-color: transparent;
  border-radius: 0.5em;
}

.clickcard:hover {
  box-shadow: 0 0 1em black;
}

.clickcard.flip {
  transform: rotateX(-180deg);
}

.clickcard .face {
  padding: 1em;
  backface-visibility: hidden;
}

.clickcard .front {
  background: #99ff99;
  display: block;
}

.clickcard.flipped .front {
  display:none;
  -webkit-transition: max-height 1s; 
  -moz-transition: max-height 1s; 
  -ms-transition: max-height 1s; 
  -o-transition: max-height 1s; 
  transition: max-height 1s; 
}

.clickcard .back {
  background: #ccffcc;
  transform: rotateX(180deg);
  display:none;
}

.clickcard.flipped .back {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickContainer">
  <div class="clickcard cardsAM">
    <div class="front face" id="card01f">
      <b> blah blah blah  </b>
</div>
<div class="back face center" id="card01b">
  It as announcing it me stimulated frequently continuing. Least their she you now above going stand forth. He pretty future afraid should genius spirit on. Set property addition building put likewise get. Of will at sell well at as. Too want but tall nay like old. Removing yourself be in answered he. Consider occasion get improved him she eat. Letter by lively oh denote an. 

Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no. An so to preferred convinced distrusts he determine. In musical me my placing clothes comfort pleased hearing. Any residence you satisfied and rapturous certainty two. Procured outweigh as outlived so so. On in bringing graceful proposal blessing of marriage outlived. Son rent face our loud near. 

Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too.
</div>
</div>
</div>

<div class="clickContainer">
  <div class="clickcard cardsAM">
    <div class="front face" id="card01f">
      <b> blah blah  </b>
</div>
<div class="back face center" id="card01b">
  Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. 

Arrived totally in as between private. Favour of so as on pretty though elinor direct. Reasonable estimating be alteration we themselves entreaties me of reasonably. Direct wished so be expect polite valley. Whose asked stand it sense no spoil to. Prudent you too his conduct feeling limited and. Side he lose paid as hope so face upon be. Goodness did suitable learning put. 

Out believe has request not how comfort evident. Up delight cousins we feeling minutes. Genius has looked end piqued spring. Down has rose feel find man. Learning day desirous informed expenses material returned six the. She enabled invited exposed him another. Reasonably conviction solicitude me mr at discretion reasonable. Age out full gate bed day lose.
</div>
</div>
</div>