CSS Card Flips and Expands but I'd like for it to be smooth

Question

I currently have this: 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>

My best way of describing what I'd like is it keeps the smaller size, flip as a smaller size and then expands to the larger size which pushes the card below it smoothly downwards. Similarly, the larger cards keeps the larger size as it flips and compacts itself to the single line smoothly such that the card below it slides up during the downsize. Currently they transition to the other size immediately and cause the cards to kind of "jump" to their position.

I saw this: Expand div on click with smooth animation

but i'm not sure how this could apply to the cards.. it didn't look like it could.

Sorry if I'm unclear. ESL.

Answer 1

Try adding a separate class to toggle front/back visibility and apply it after the animation has had time to complete.

    $('.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>