JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<div id="fx" class="" style="height:100px;">d</div>
<div id="fx2" style="height:100px;">e</div>

CSS

div { width: 100px; }
div.run { 
        opacity: .5;
}
div:hover { -webkit-transition: all 300ms; background: blue; }

JavaScript

'swapNode' in document.documentElement || Element.implement({
    swapNode: function(other) {
            other = $(other);
            var next = other.nextSibling, parent = other.parentNode;
            this.parentNode.replaceChild(other, this);
            return parent.insertBefore(this, next);
    }
});


$('fx').addEventListener( 'webkitTransitionEnd', function( event ) { 
    console.log(1);

    this.toggleClass('run');

}, false );

$('fx').swapNode('fx2');
$('fx2').swapNode('fx');