fix

assets/animations/animations.css

@@ -1,6 +1,6 @@
 .anim-scale-in {
     animation-name: scale-in;
-    animation-duration: .15s;
+    animation-duration: var(--animation-duration, 0.15s);
     animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
 }
 
@@ -16,8 +16,8 @@
 }
 
 .anim-scale-out {
-    -webkit-animation: scale-out-center 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
-    animation: scale-out-center 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
+    -webkit-animation: scale-out-center var(--animation-duration, 0.15s) cubic-bezier(0.2, 0, 0.13, 1.5);
+    animation: scale-out-center var(--animation-duration, 0.15s) cubic-bezier(0.2, 0, 0.13, 1.5);
 }
 @-webkit-keyframes scale-out-center {
     0% {

assets/core/core.register.js

@@ -278,6 +278,11 @@ __PluginManager__.registerPlugins({
 
         }
     },
+    makeCSSAnimations: {
+        path: __pmConfig__.assetsPath + '/makeCSSAnimations',
+        js: '/makeCSSAnimations.js',
+        deps: ['jQuery', 'support'],
+    },
 
 });
 

assets/makeCSSAnimations/makeCSSAnimations.js

@@ -0,0 +1,62 @@
+/** @module makeCSSAnimations */
+kit.PluginManager.register('makeCSSAnimations', function(module, exports, require, global) {
+
+    var support = require('support');
+    var $ = require('jQuery');
+
+    var whichAnimationEvent = support.whichAnimationEvent();
+
+    /**
+     * @memberOf kit
+     * @param options {{container: jQuery, animationClass: string, stateClass: string, direction: 'fwd'|'back', before: null|function,  after: null|function}}
+     */
+    var makeCSSAnimations = function (options) {
+
+        var defaults = {
+            container: null,
+            animationClass: null,
+            stateClass: null,
+            before: null,
+            after: null,
+            direction: 'fwd' // 'back'
+        };
+
+        var settings = $.extend(defaults, options);
+
+        if (settings.before !== null && typeof settings.before === 'function') {
+            settings.before();
+        }
+
+        if (whichAnimationEvent) {
+
+            if (settings.direction === 'fwd') {
+                settings.container.addClass(settings.stateClass);
+            }
+
+            settings.container.addClass(settings.animationClass);
+
+            settings.container.one(whichAnimationEvent, function () {
+                settings.container.removeClass(settings.animationClass);
+                if (settings.direction === 'back') {
+                    settings.container.removeClass(settings.stateClass);
+                }
+                if (settings.after !== null && typeof settings.after === 'function') {
+                    settings.after();
+                }
+            });
+        } else {
+
+            if (settings.direction === 'fwd') {
+                settings.container.addClass(settings.stateClass);
+            } else if (settings.direction === 'back') {
+                settings.container.removeClass(settings.stateClass);
+            }
+
+            if (settings.after !== null && typeof settings.after === 'function') {
+                settings.after();
+            }
+        }
+    };
+
+    return module.exports = makeCSSAnimations;
+});

assets/support/support.js

@@ -441,6 +441,42 @@ __PluginManager__.register('support', function(module, exports, require, global)
         node.getAttribute('')
     }
 
+    /**
+     * @description Событие окончания CSS transition
+     */
+    function whichTransitionEvent() {
+        var el = document.createElement("fakeelement");
+        var transitions = {
+            "transition": "transitionend",
+            "OTransition": "oTransitionEnd",
+            "MozTransition": "transitionend",
+            "WebkitTransition": "webkitTransitionEnd"
+        };
+        for (var t in transitions) {
+            if (el.style[t] !== undefined) {
+                return transitions[t];
+            }
+        }
+    };
+
+    /**
+     * @description Событие окончания CSS animation
+     */
+    function whichAnimationEvent() {
+        var el = document.createElement("fakeelement2");
+        var animations = {
+            "animation": "animationend",
+            "OAnimation": "oAnimationEnd",
+            "MozAnimation": "animationend",
+            "WebkitAnimation": "webkitAnimationEnd"
+        };
+        for (var t in animations) {
+            if (el.style[t] !== undefined) {
+                return animations[t];
+            }
+        }
+    };
+
     /**
      * @memberOf kit
      */
@@ -478,7 +514,9 @@ __PluginManager__.register('support', function(module, exports, require, global)
         tagName: setTagName,
         data,
         setObjProp,
-        getObjProp
+        getObjProp,
+        whichAnimationEvent,
+        whichTransitionEvent
     };
 
     return module.exports = support;