JSFiddle - React, Tailwind, and code Playground

by Bohdan Doroshenko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <h2>Start values in enter-leave classes</h2>
  <hr>
  <button class="btn btn-primary show-alert">Show</button>
  <button class="btn btn-warning hide-alert">Hide</button>
  <hr>
  <div class="anim-target alert alert-success">
    <p>Some text Some text</p>
    <p>Some text Some text</p>
    <p>Some text Some text</p>
    <p>Some text Some text</p>
  </div>
  <hr>
  <p>Other content</p>
</div>
<script src="https://unpkg.com/dl-animate"></script>

CSS

.anim-target{
  display: inline-block;
}

.fade-enter{
  opacity: 0.3;
  transform: translateX(-100px);
}

.fade-enter-active{
  transition: opacity 1s, transform 1s;
}

.fade-enter-to{

}

.fade-leave{
  opacity: 0.5;
  transform: translateX(50px);
}

.fade-leave-active{
  transition: opacity 1s, transform 1s;
}

.fade-leave-to{
  opacity: 0;
  transform: translateX(100px);
}

JavaScript

var alert = document.querySelector('.anim-target');

document.querySelector('.show-alert').addEventListener('click', function(){
  DLAnimate.show(alert, {
    name: 'fade'
  });
});

document.querySelector('.hide-alert').addEventListener('click', function(){
  DLAnimate.hide(alert, {
    name: 'fade'
  });
});