anime-ts/lib/index.js

A lightweight and flexible JS/TS animation library that provides smooth animation with precise control. Features include customizable durations, timing functions, delays, and lifecycle hooks. Perfect for creating performant web animations with minimal ove

export class An {
    constructor(target, myAttribute, time, ease, delay) {
        this.onRun = () => { };
        this.onStart = () => { };
        this.onCancel = () => { };
        this.onEnd = () => { };
        this._activeTransitions = 0;
        this._hasStarted = false;
        this._hasRun = false;
        this._target = typeof target === 'object' ? target : document.querySelector(target);
        this._attKey = Object.keys(myAttribute);
        const DefaultAnimationDetail = {
            time: time ?? '0.7s',
            ease: ease ?? 'ease-out',
            delay: delay ?? '',
        };
        this._target.style.setProperty('transition', 'none');
        const _init = () => {
            let trValues = '';
            for (const [key, value] of Object.entries(myAttribute)) {
                const trObj = typeof value === 'string'
                    ? { ...DefaultAnimationDetail, to: value }
                    : { ...DefaultAnimationDetail, ...value };
                if (trObj.from) {
                    this._target.style.setProperty(key, trObj.from);
                }
            }
            this._target.offsetHeight;
            for (const [key, value] of Object.entries(myAttribute)) {
                const trObj = typeof value === 'string'
                    ? { ...DefaultAnimationDetail, to: value }
                    : { ...DefaultAnimationDetail, ...value };
                trValues += `${key} ${trObj.time} ${trObj.ease} ${trObj.delay}, `;
                this._target.style.setProperty(key, trObj.to);
            }
            trValues = trValues.slice(0, -2);
            this._target.style.setProperty('transition', trValues);
            const onRuntTr = () => {
                if (!this._hasRun)
                    this.onRun();
                this._hasRun = true;
            };
            const onStartTr = () => {
                this._activeTransitions++;
                if (!this._hasStarted) {
                    this._hasStarted = true;
                    this.onStart();
                }
            };
            const onEndTr = () => {
                this._activeTransitions--;
                if (this._activeTransitions === 0) {
                    this._hasStarted = false;
                    this._hasRun = false;
                    this._target.style.setProperty('transition', 'none');
                    this.onEnd();
                    this._target.removeEventListener('transitionrun', onRuntTr);
                    this._target.removeEventListener('transitionstart', onStartTr);
                    this._target.removeEventListener('transitionend', onEndTr);
                }
            };
            this._target.addEventListener('transitionrun', onRuntTr);
            this._target.addEventListener('transitionstart', onStartTr);
            this._target.addEventListener('transitionend', onEndTr);
        };
        _init();
    }
    stop() {
        const computedStyle = window.getComputedStyle(this._target);
        for (const key of this._attKey) {
            this._target.style.setProperty(key, computedStyle.getPropertyValue(key));
        }
        this._target.style.setProperty('transition', 'none');
        this._activeTransitions = 0;
        this._hasStarted = false;
        this._hasRun = false;
        this.onCancel();
    }
}