web-ui-pack/helpers/animateStack.js

Web package with UI elements

import { isAnimEnabled } from "./animate";
export default function animateStack(target, items, ms, isHide = false, isVertical = true) {
    const isFinished = ms < 10 || !isAnimEnabled();
    if (isFinished) {
        const p = Promise.resolve(isFinished);
        return Object.assign(p, { stop: () => p });
    }
    const arr = Array.prototype.slice.call(items);
    const parent = arr[0].parentElement;
    let resMe;
    if (arr[0]._hideStyle === undefined) {
        parent.style.overflow = "visible";
        parent.style.zIndex = ((Number.parseInt(getComputedStyle(target).zIndex, 10) || 1) - 1).toString();
        const r0 = target.getBoundingClientRect();
        arr.forEach((a) => {
            const r = a.getBoundingClientRect();
            a._hideStyle = isVertical
                ? `translateY(${Math.round(r0.top - r.top)}px)`
                : `translateX(${Math.round(r0.left - r.left)}px)`;
            if (!isHide) {
                a.style.transform = a._hideStyle;
            }
        });
    }
    const reset = () => {
        parent.style.overflow = "";
        parent.style.zIndex = "";
        !parent.getAttribute("style") && parent.removeAttribute("style");
        arr.forEach((a) => {
            delete a._hideStyle;
            a.style.transition = "";
        });
        setTimeout(() => arr.forEach((a) => {
            a.style.transform = "";
            !a.getAttribute("style") && a.removeAttribute("style");
        }), 1);
    };
    let tid;
    window.requestAnimationFrame(() => {
        arr.forEach((a) => {
            a.style.transition = `transform ${ms}ms ease-out`;
            a.style.transform = isHide ? a._hideStyle : "";
        });
        tid = setTimeout(() => {
            resMe(true);
            reset();
        }, ms);
    });
    const p = new Promise((res) => {
        resMe = res;
    });
    p.stop = (isFinish = true) => {
        isFinish && reset();
        resMe(isFinish);
        tid && clearTimeout(tid);
        return p;
    };
    return p;
}