JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<button>click</button>

CSS

button {
    width: 100px;
    -webkit-transition: all 1s;
}
.transition {
    width: 150px
}

JavaScript

$(function() {
    var callbacks = $.Callbacks(); // $.Callbacks("once") to fire once
    
    function2 = function(j) {
      alert(j);
    };
    
    callbacks.add(function2);
    
    $(window).on("transitionComplete", function(e, i) {
     // function2(i);
        callbacks.fireWith($(this), [i]);
    });
    //webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd
    function1 = function() {
      $("button").on('transitionend', function (e) {
        $(window).trigger("transitionComplete", ["ok"]);
      });
    };
    
    function1();
    
    $("button").on("click", function(e) {
      $(this).toggleClass("transition");
    });
  
});