JSFiddle - React, Tailwind, and code Playground

by maccman

HTML

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

CSS

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

JavaScript

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

$.fn.emulateTransitionEnd = function(duration) {
  var called = false, $el = this;
  $(this).one('webkitTransitionEnd', function() { called = true; });
  var callback = function() { if (!called) $($el).trigger('webkitTransitionEnd'); };
  setTimeout(callback, duration);
};

$.fn.transition = function (properties, options) {
  var $el = $(this);
  options = $.extend({}, defaults, options);
  properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
  
  var callback = function(){
    $el.dequeue();
    if (options.complete) options.complete.apply($el);
  };
    
  $el.queue(function(){
    $el.one('webkitTransitionEnd', callback);
    $el.emulateTransitionEnd();
    $el.css(properties);
  });
      
  return this;
};

setTimeout(function(){
  var callback = function(){ alert('Transition complete') };
  $('.element')
      .transition({marginLeft: 100})
      .delay(1000)
      .transition({marginTop: 200}, {complete: callback});
}, 2000);