JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<h1 data-start="fadeOutDown" data-end="fadeInDown"><a href="#">Animate.css</a></h1>

CSS

body {
    overflow: hidden;
}

JavaScript

$('h1').on('click', function(){
    var start = $(this).data('start');
    var end = $(this).data('end');
    
    $(this).addClass('animated ' + start);
    
    $(this).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass().addClass('animated ' + end);
        
    });
    
});