Animate Card

by kyllle

HTML

<div class="card  js-card">
  <button class="js-action--animate">Animate</button>
</div>

SCSS

html,
body {
  height: 100%;
}

@keyframes resize {
  50% {
    width: 100%;
  }
  100% {
    height: 100vh;
  }
}

$timing: .6s;

div {
  width: 33.3333%;
  //min-height: 300px;
  height: 30vh;
  background: white;
  transition: width $timing, $timing height .4s;
  
  &.animate {
    width: 100%;
    height: 100%;
  }
  
  &.out {
    // on transition end
    transition: height $timing, $timing width .4s;
  }
}

JavaScript

$('.js-action--animate').on('click', function(event) {
  event.preventDefault();

  $('.js-card').toggleClass('animate');

  
  $('.js-card').on('transitionend', function() {
  	  $('.js-card').addClass('out');
  });
});