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);
+    -webkit-animation: scale-out-center var(--animation-duration, 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);
+    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;

tests/makeCSSAnimationsTest.php

@@ -0,0 +1,92 @@
+<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
+<?
+if(\Bitrix\Main\Loader::includeModule('wt.core')) {
+    app()->service()->assets()->setPlugins([
+        'kit:config',
+        'kit:flex-kit',
+        'kit:core',
+        'kit:bsCore',
+        'kit:collapse',
+        'kit:site',
+        'kit:toolkit',
+        'kit:theme',
+    ])->render();
+}
+$APPLICATION->ShowHead();
+
+?>
+<script>
+    kit.ready(['makeCSSAnimations', 'animations'], __handler = function () {
+
+        kit.makeCSSAnimations({
+            container: kit.jQuery('.test-object'),
+            animationClass: kit.animations.scaleOut,
+            stateClass: 'active',
+            direction: "fwd",
+            before: function () {
+                //pre('makeCSSAnimations fwd before', (new Date).toString());
+            },
+            after: function () {
+                //pre('makeCSSAnimations fwd after', (new Date).toString());
+                kit.makeCSSAnimations({
+                    container: kit.jQuery('.test-object'),
+                    animationClass: kit.animations.scaleIn,
+                    stateClass: 'active',
+                    direction: "back",
+                    before: function () {
+                        //pre('makeCSSAnimations back before', (new Date).toString());
+                    },
+                    after: function () {
+                        //pre('makeCSSAnimations back after', (new Date).toString());
+                        __handler();
+                    },
+                });
+            },
+        });
+    });
+    kit.ready(['makeCSSAnimations', 'animations'], __handler2 = function () {
+
+        kit.makeCSSAnimations({
+            container: kit.jQuery('.test-object2'),
+            animationClass: kit.animations.scaleIn,
+            stateClass: 'active',
+            direction: "fwd",
+            before: function () {
+                //pre('makeCSSAnimations fwd before', (new Date).toString());
+            },
+            after: function () {
+                //pre('makeCSSAnimations fwd after', (new Date).toString());
+                kit.makeCSSAnimations({
+                    container: kit.jQuery('.test-object2'),
+                    animationClass: kit.animations.scaleOut,
+                    stateClass: 'active',
+                    direction: "back",
+                    before: function () {
+                        //pre('makeCSSAnimations back before', (new Date).toString());
+                    },
+                    after: function () {
+                        //pre('makeCSSAnimations back after', (new Date).toString());
+                        __handler2();
+                    },
+                });
+            },
+        });
+    });
+</script>
+
+<div  class="kit-wrapper">
+    <div class="test-wrapper" style="padding: 100px;--animation-duration:3s;">
+        <div class="test-ob test-object" style="background-color: green; width: 50px; height: 50px;border-radius: 50%;"></div>
+        <div class="test-ob test-object2 active" style="background-color: green; width: 50px; height: 50px;border-radius: 50%;"></div>
+    </div>
+    <style>
+        .test-ob {
+            visibility: hidden;
+        }
+        .test-ob.active {
+            visibility: visible;
+        }
+    </style>
+</div>
+<?
+?>