Amazing Transition Controller

TransitionController.js

(function() {
  window.AnimationController = {
    enter: function(element, parent, callback) {
      parent.append(element);
      AnimationController.transition(element, "t-enter", "t-enter-active", function() {
        if (callback) callback()
      });
    },
    leave: function(element, callback) {
      AnimationController.transition(element, "t-leave", "t-leave-active", function() {
        if (callback) callback()
        element.remove();
      });
    },

    show: function(element, callback) {
      AnimationController.transition(element, "t-show", "t-show-active", function() {
        if (callback) callback()
      });
    },
    hide: function(element, callback) {
      AnimationController.transition(element, "t-hide", "t-hide-active", function() {
        if (callback) callback()
      });
    },

    animate: function(element, animationClass, callback) {
      AnimationController.transition(element, animationClass, null, function() {
        if (callback) callback();
      }, "animation");
    },

    transition: function(element, startClass, endClass, callback, _type) {
      var type = "transition";
      if (_type) type = _type;

      element.addClass(startClass);
      var computedStyle = getComputedStyle(element[0]);
      var time = computedStyle["webkit"+type.charAt(0).toUpperCase()+type.slice(1)+"Duration"] || computedStyle[type+"Duration"];

      if (parseFloat(time) > 0) {
        element.css("transition", "all 0s linear");

        requestAnimationFrame(function() {
          element.css("transition", "");

            element.addClass(endClass);

            setTimeout(function() {
              element.removeClass(startClass + " " + endClass);
              if (callback) callback();
            }, parseFloat(time) * 1000);

        });
      }else{
        element.css("transition", "");
        element.removeClass(startClass);

        if (callback) callback();
      }
    }
  }
})();