JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div id="box"></div>

CSS

div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
    background: #f00;
    
    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
    -ms-transition: all 2s linear;
    
}

JavaScript

transitionEnd = function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
        'transition':'transitionEnd',
        'OTransition':'oTransitionEnd',
        'MSTransition':'msTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
    }
    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}()


$(document).ready(function() {
    var o = $('#box');
    /*var p = [
            
    ]*/
    
    var fAfter = function() {
    
        console.log('fAfter');
        
        var a = parseInt(o.css('top'),10) * 2 + 1
        var b = parseInt(o.css('width'),10) * 2
        
        if (b > 900) { return; }
        clearTimeout(window.x);
        window.x = setTimeout(function() {
            console.log('timeout fired');
            o.css({
                top: a,
                left: a,
                width: b,
                height: b
            });
        }, 5);
    }
    
    o.bind(transitionEnd, function() { fAfter(); });

    setTimeout(function(){ fAfter(); }, 1000);
        
});