JSFiddle - React, Tailwind, and code Playground

by wayne chauncy

HTML

<div class="m m1"></div>
<div class="m m2"></div>
<button>Click</button>

CSS

.m {
  width: 200px;
  height: 100px;
  margin-bottom: 20px;
  will-change: transform;
}

.m1 {
  background: #f90;
}

.m2 {
  background: #90f;
}

.leave {
  animation: right 1s ease-out forwards;
  will-change: height;
}

.dnone {
  animation: dnone .2s ease-out forwards;
}

@keyframes right {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(200%, 0, 0);
    opacity: 0;
  }
}

@keyframes dnone {
  0% {
    transform: translate3d(200%, 0, 0) scale(1, 1);
    opacity: 0;
  }
  100% {
    transform: translate3d(200%, 0, 0) scale(1, 0);
    opacity: 0;
    height: 0px;
    margin: 0;
  }
}

JavaScript

on('.m1', 'animationend', function() {
  var classlist = Array.prototype.slice.apply(this.classList);
  if (classlist.indexOf('dnone') == -1) {
    this.classList.add('dnone')
  } else {
    setTimeout(function() {
      this.parentNode.removeChild(this)
    }, 1000)
  }
})

on('button', 'click', function() {
  select('.m1').classList.toggle('leave');
})

function select(selector) {
  return document.querySelector(selector)
}

function on(selector, eventName, cb) {
  select(selector).addEventListener(eventName, cb);
}