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) {
  options = $.extend({}, defaults, options);
  properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
  $(this).one('webkitTransitionEnd', options.complete || $.noop);
  $(this).emulateTransitionEnd();
  $(this).css(properties);
};

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