uikit 3.25.24-dev.66bb413 → 3.25.24-dev.683b9f8

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.25.24-dev.66bb413",
+    "version": "3.25.24-dev.683b9f8",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/scrollspy.js

@@ -1,13 +1,4 @@
-import {
-    $$,
-    css,
-    filter,
-    data as getData,
-    once,
-    removeClass,
-    toggleClass,
-    trigger,
-} from 'uikit-util';
+import { $$, css, filter, data as getData, removeClass, toggleClass, trigger } from 'uikit-util';
 import { intersection } from '../api/observables';
 import { awaitTimeout } from '../util/await';
 
@@ -121,16 +112,15 @@ export default {
             toggleClass(el, clsInView, inview);
             toggleClass(el, state.cls);
 
-            let match;
-            if ((match = state.cls.match(/\buk-animation-[\w-]+/g))) {
-                const removeAnimationClasses = () => removeClass(el, match);
-                if (inview) {
-                    state.off = once(el, 'animationcancel animationend', removeAnimationClasses, {
-                        self: true,
-                    });
-                } else {
-                    removeAnimationClasses();
-                }
+            const match = state.cls.match(/\buk-animation-[\w-]+/g);
+            if (match) {
+                const animations = (inview && el.getAnimations?.()) || [];
+
+                let active = true;
+                state.off = () => (active = false);
+
+                const cleanup = () => active && removeClass(el, match);
+                Promise.all(animations.map(({ finished }) => finished)).then(cleanup, cleanup);
             }
 
             trigger(el, inview ? 'inview' : 'outview');

package/src/js/mixin/modal.js

@@ -4,7 +4,6 @@ import {
     append,
     css,
     dimensions,
-    endsWith,
     includes,
     isFocusable,
     isSameSiteAnchor,
@@ -239,25 +238,9 @@ function animate(el, show, { transitionElement, _toggle }) {
 
             _toggle(el, show);
 
-            const off = once(
-                transitionElement,
-                'transitionstart',
-                () => {
-                    once(transitionElement, 'transitionend transitioncancel', resolve, {
-                        self: true,
-                    });
-                    clearTimeout(timer);
-                },
-                { self: true },
-            );
-
-            const timer = setTimeout(
-                () => {
-                    off();
-                    resolve();
-                },
-                toMs(css(transitionElement, 'transitionDuration')),
-            );
+            Promise.all(
+                (transitionElement.getAnimations?.() ?? []).map(({ finished }) => finished),
+            ).then(resolve, reject);
         }),
     ).then(() => {
         if (pendingReject.get(el) === rejectAnimation) {
@@ -266,10 +249,6 @@ function animate(el, show, { transitionElement, _toggle }) {
     });
 }
 
-function toMs(time) {
-    return toFloat(time) * (endsWith(time, 'ms') ? 1 : 1000);
-}
-
 function preventBackgroundFocus(modal) {
     return on(document, 'focusin', (e) => {
         if (last(active) !== modal || modal.$el.contains(e.target)) {

package/src/js/mixin/togglable.js

@@ -242,15 +242,14 @@ async function toggleTransition(el, show, { animation, duration, velocity, trans
     }
 }
 
-function toggleAnimation(el, show, cmp) {
-    const { animation, duration, _toggle } = cmp;
+async function toggleAnimation(el, show, cmp) {
+    const { animation, duration, origin, _toggle } = cmp;
 
     if (show) {
         _toggle(el, true);
-        return Animation.in(el, animation[0], duration, cmp.origin);
+        return Animation.in(el, animation[0], duration, origin);
     }
 
-    return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
-        _toggle(el, false),
-    );
+    await Animation.out(el, animation[1] || animation[0], duration, origin);
+    _toggle(el, false);
 }

package/src/js/util/animation.js

@@ -62,47 +62,66 @@ export const Transition = {
 };
 
 const clsAnimation = 'uk-animation';
-const animationEnd = 'animationend';
-const animationCanceled = 'animationcanceled';
+const activeAnimations = new WeakMap();
 
 function animate(element, animation, duration = 200, origin, out) {
-    return Promise.all(
-        toNodes(element).map(
-            (element) =>
-                new Promise((resolve, reject) => {
-                    if (hasClass(element, clsAnimation)) {
-                        trigger(element, animationCanceled);
-                    }
-
-                    const classes = [
-                        animation,
-                        clsAnimation,
-                        `${clsAnimation}-${out ? 'leave' : 'enter'}`,
-                        origin && `uk-transform-origin-${origin}`,
-                        out && `${clsAnimation}-reverse`,
-                    ];
-
-                    const timer = setTimeout(() => trigger(element, animationEnd), duration);
-
-                    once(
-                        element,
-                        [animationEnd, animationCanceled],
-                        ({ type }) => {
-                            clearTimeout(timer);
-
-                            type === animationCanceled ? reject() : resolve(element);
+    const animateFn = async (element) => {
+        if (!Element.prototype.getAnimations) {
+            return element;
+        }
+
+        cancel(element);
+
+        const existingAnimations = element.getAnimations();
+
+        const classes = [
+            animation,
+            clsAnimation,
+            `${clsAnimation}-${out ? 'leave' : 'enter'}`,
+            origin && `uk-transform-origin-${origin}`,
+            out && `${clsAnimation}-reverse`,
+        ];
+
+        css(element, 'animationDuration', `${duration}ms`);
+        addClass(element, classes);
+
+        const animations = element
+            .getAnimations()
+            .filter((animation) => !existingAnimations.includes(animation));
+        const data = { animations, classes };
+
+        activeAnimations.set(element, data);
+
+        try {
+            await Promise.all(animations.map(({ finished }) => finished));
+            return element;
+        } finally {
+            cleanup(element, data);
+        }
+    };
+
+    return Promise.all(toNodes(element).map(animateFn));
+}
 
-                            css(element, 'animationDuration', '');
-                            removeClass(element, classes);
-                        },
-                        { self: true },
-                    );
+function cleanup(element, data) {
+    if (activeAnimations.get(element) === data) {
+        activeAnimations.delete(element);
+        css(element, 'animationDuration', '');
+        removeClass(element, data.classes);
+    }
+}
 
-                    css(element, 'animationDuration', `${duration}ms`);
-                    addClass(element, classes);
-                }),
-        ),
-    );
+function cancel(elements) {
+    for (const element of toNodes(elements)) {
+        const data = activeAnimations.get(element);
+
+        if (data) {
+            for (const animation of data.animations) {
+                animation.cancel();
+            }
+            cleanup(element, data);
+        }
+    }
 }
 
 export const Animation = {
@@ -113,10 +132,8 @@ export const Animation = {
     },
 
     inProgress(element) {
-        return hasClass(element, clsAnimation);
+        return activeAnimations.has(element);
     },
 
-    cancel(element) {
-        trigger(element, animationCanceled);
-    },
+    cancel,
 };