JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<div class="element"></div>

CSS

body {
    margin: 20px;
}
.element {
    width: 100px;
    height: 100px;
    background: red;
}

JavaScript

var defaults = {
    duration: 2000,
    easing: ''
};

console.log("####START####");

$.fn.emulateTransitionEnd = function (duration) {
    var called = false,
        $el = this;
    console.log("rodou emulate");

    $(this).one('webkitTransitionEnd', function () {
        console.log("rodou evento end do emulate called = TRUE");
        called = true;
    });

    var callback = function () {
        if (!called) {
            console.log("triggero o end");
            $($el).trigger('webkitTransitionEnd');
        } else {
            console.log("nun chamĂ´");
        }
    };

    setTimeout(callback, duration);
};

$.fn.transition = function (properties, options) {
    options = $.extend({}, defaults, options);
    properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
    $(this).one('webkitTransitionEnd', options.complete || $.noop);
    $(this).emulateTransitionEnd(defaults.duration + 50); //+50 so callback is called after webkitTransitionEnd with called set to true
    $(this).css(properties);
};


var callback = function () {
    $('.element').remove();
    console.log('####Transition complete###');
};
$('.element').transition({
    marginLeft: 100
}, {
    complete: callback
});