JSFiddle - React, Tailwind, and code Playground

Basic transition system for two elements.

by Travis Almand

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<!-- animate.css -->
<!--
  the data attributes are set with defaults
  if transition('#animate') is called then these transitions will happen
  but the example buttons below dynamically change these data attributes to different transitions
  note the data-library-class entry, animate.css requires "animated" class
-->
<div id="animate" class="container" data-leave-class="fadeOut" data-enter-class="fadeIn" data-library-class="animated">
  <div id="animate1" class="box"></div>
  <div id="animate2" class="box hidden"></div>
</div>

<!-- these are the example buttons for animate.css transitions -->
<div>
  <button id="animate_fade">fade</button>
  <button id="animate_fade_slide">fade slide</button>
  <button id="animate_bounce">bounce</button>
</div>

<!-- animista -->
<!--
  the data attributes are set with defaults
  if transition('#animista') is called then these transitions will happen
  but the example buttons below dynamically change these data attributes to different transitions
  note there's no data-library-class entry, animista doesn't require one
-->
<div id="animista" class="container" data-leave-class="scale-out-center" data-enter-class="scale-in-center">
  <div id="animista1" class="box"></div>
  <div id="animista2" class="box hidden"></div>
</div>

<!-- these are the example buttons for animista transitions -->
<div>
  <button id="animista_scale">scale</button>
  <button id="animista_slit">slit</button>
  <button id="animista_flicker">flicker</button>
</div>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  padding: 0;
  margin: 0;
}
body {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.container {
  align-items: center;
  background-color: #707070;
  border: {
    color: #333333;
    style: solid;
    width: 3px;
  }
  display: flex;
  height: 200px;
  justify-content: center;
  margin: 20px;
  overflow: hidden;
  width: 300px;
}

.box {
  border: {
    color: #333333;
    style: solid;
    width: 2px;
  }
  height: 100px;
  width: 100px;
}
#animate1,
#animista1{
  background-color: rebeccapurple;
}
#animate2,
#animista2 {
  background-color: #307B21;
}

.hidden {
  display: none !important;
}




/* ----------------------------------------------
 * Generated by Animista on 2019-3-20 23:56:28
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.scale-in-center{animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both}
@keyframes scale-in-center{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:1}}
.scale-out-center{animation:scale-out-center .5s cubic-bezier(.55,.085,.68,.53) both}
@keyframes scale-out-center{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:1}}
.slit-in-vertical{animation:slit-in-vertical .45s ease-out both}
@keyframes slit-in-vertical{0%{transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{transform:translateZ(0) rotateY(0)}}
.slit-out-vertical{animation:slit-out-vertical .5s ease-in both}
@keyframes slit-out-vertical{0%{transform:translateZ(0) rotateY(0);opacity:1}54%{transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{transform:translateZ(-800px) rotateY(90deg);opacity:0}}
.flicker-in-1{animation:flicker-in-1 2s linear both}
@keyframes...

JavaScript

console.clear();

// https://daneden.github.io/animate.css/
document.querySelector('#animate_fade').addEventListener('click', function () {
	const container = document.querySelector('#animate');
  container.dataset.leaveClass = 'fadeOut';
  container.dataset.enterClass = 'fadeIn';
  
  transition('#animate');
});
document.querySelector('#animate_fade_slide').addEventListener('click', function () {
	const container = document.querySelector('#animate');
  container.dataset.leaveClass = 'fadeOutRight';
  container.dataset.enterClass = 'fadeInLeft';
  
  transition('#animate');
});
document.querySelector('#animate_bounce').addEventListener('click', function () {
	const container = document.querySelector('#animate');
  container.dataset.leaveClass = 'bounceOutUp';
  container.dataset.enterClass = 'bounceInDown';
  
  transition('#animate');
});

// http://animista.net/
document.querySelector('#animista_scale').addEventListener('click', function () {
	const container = document.querySelector('#animista');
  container.dataset.leaveClass = 'scale-out-center';
  container.dataset.enterClass = 'scale-in-center';
  
	transition('#animista');
});
document.querySelector('#animista_slit').addEventListener('click', function () {
	const container = document.querySelector('#animista');
  container.dataset.leaveClass = 'slit-out-vertical';
  container.dataset.enterClass = 'slit-in-vertical';
  
	transition('#animista');
});
document.querySelector('#animista_flicker').addEventListener('click', function () {
	const container = document.querySelector('#animista');
  container.dataset.leaveClass = 'flicker-out-1';
  container.dataset.enterClass = 'flicker-in-1';
  
	transition('#animista');
});

var transition = function (target) {
	const container = document.querySelector(target);
	const elementA = container.querySelector(':first-child');
  const elementB = container.querySelector(':last-child');
  const leaveClass = container.dataset.leaveClass;
  const enterClass =...