JSFiddle - React, Tailwind, and code Playground

by Bohdan Doroshenko

HTML

<div class="container">
  <h2>Some sample</h2>
  <hr>
  <button class="btn btn-primary show-alert">Show</button>
  <button class="btn btn-warning hide-alert">Hide</button>
  <hr>
  <div class="alert alert-success animTarget">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>
  <hr>
  <p>Other content</p>
</div>

CSS

.animTarget{
	display: none;
}

.fa-enter{
	visibility: hidden;
}

.fa-enter-active{
	animation: niceIn 0.5s linear;
}

.fa-enter-to{
	
}

.fa-leave{

}

.fa-leave-active{
	animation: niceOut 0.5s linear;
}

.fa-leave-to{
	
}

@keyframes niceIn{
	from{
		transform: translateX(-100px) scale(0.9);
		opacity: 0;
	}
	to{
		transform: translateX(0px) scale(1);
		opacity: 1;
	}
}

@keyframes niceOut{
	from{
		transform: translateX(0px) scale(1);
		opacity: 1;
	}
	to{
		transform: translateX(100px) scale(0.9);
		opacity: 0;
	}
}

JavaScript

var btnShow = document.querySelector('.show-alert');
var btnHide = document.querySelector('.hide-alert');
var divAlert = document.querySelector('.animTarget');

	btnHide.addEventListener('click', function(){
		var handler = function(){
			divAlert.style.display = 'none';
			divAlert.classList.remove('fa-leave-active');
			divAlert.classList.remove('fa-leave-to');
			divAlert.removeEventListener('animationend', handler);
		};

		divAlert.classList.add('fa-leave');

		raf(function(){
			divAlert.classList.add('fa-leave-active');
			divAlert.classList.add('fa-leave-to');
			divAlert.classList.remove('fa-leave');
		});

		divAlert.addEventListener('animationend', handler);
	});

	btnShow.addEventListener('click', function(){
		var handler = function(){
			divAlert.classList.remove('fa-enter-active');
			divAlert.classList.remove('fa-enter-to');
			divAlert.removeEventListener('animationend', handler);
		};

		divAlert.style.display = 'block';
		divAlert.classList.add('fa-enter');

		raf(function(){
			divAlert.classList.add('fa-enter-active');
			divAlert.classList.add('fa-enter-to');
			divAlert.classList.remove('fa-enter');
		});
		
		divAlert.addEventListener('animationend', handler);
	});

function raf(fn){
	window.requestAnimationFrame(function(){
		window.requestAnimationFrame(function(){
			fn();
		});
	});
}