JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<link rel="stylesheet" href="http://daneden.me/animate/animate.css">
<div id="parent">
    <div class="widget">
        <p><a href="#foo" class="animate">see foo</a></p>
    </div>
    <div id="foo">foo</div>
        
    <div class="widget">
        <p><a href="#bar">see bar</a></p>
    </div> 
    <div id="bar" class="animate">bar</div>
</div>

CSS

#parent { background: #999; padding: 10px; }
#foo, #bar { display: none; }
.animate {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-delay: .2s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 1s;
    -ms-animation-delay: .2s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

JavaScript

(function($) {
    $.fn.animateCSS = function(effect, delay, callback) {
        // Return this to maintain chainability
        return this.each(function() {
            // Cache $(this) for speed
            var $this = $(this);
            // Check if delay exists or if it's a callback
            if (!delay || typeof delay == 'function') {
                // If it's a callback, move it to callback so we can call it later
                callback = delay;
                // Set the delay to 0 for the setTimeout
                delay = 0;
            }

            // Start a counter so we can delay the animation if required
            var animation = setTimeout(function() {
                // Add the animation effect with classes
                $this.addClass('animate ' + effect);
                // Check if the element has been hidden to start with
                if ($this.css('visibility') == 'hidden') {
                    // If it has, show it (after the class has been added)
                    $this.css({
                        'visibility': 'visible'
                    });
                }

                // If the element is hidden
                if ($this.is(':hidden')) {
                    // Show it
                    $this.show();
                } else {
                    $this.hide();
                }

                // Event triggered when the animation has finished
                $this.bind('animationend webkitAnimationEnd', function() {
                    // Add a callback event
                    if (typeof callback == 'function') {
                        // Execute the callback
                        callback.call(this);
                    }
                });
                // Specify the delay
            }, delay);
        });
    };
})(jQuery);

var widget = $('.widget');
widget.bind('click', function(event) {
    event.preventDefault();
    var link = $(this).find('a').attr('href');
    if ($(link).is(':visible'))...