anime-ts
Version:
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
83 lines (82 loc) • 3.51 kB
JavaScript
class Anime {
constructor(target, myAttribute, detail) {
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: detail?.time ? detail?.time : 0.4,
ease: detail?.ease ?? 'ease-out',
delay: detail?.delay ? detail?.delay : 0,
};
const _init = () => {
this._target.style.setProperty('transition', 'none');
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);
}
}
void this._target.offsetWidth; // یا offsetHeight
let trValues = '';
for (const [key, value] of Object.entries(myAttribute)) {
const trObj = typeof value === 'string'
? { ...DefaultAnimationDetail, to: value }
: { ...DefaultAnimationDetail, ...value };
trValues += `${key} ${trObj.time}s ${trObj.ease} ${trObj.delay}s, `;
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.onEnd();
this._target.style.setProperty('transition', 'none');
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();
}
}
export function An(target, myAttribute, detail) {
return new Anime(target, myAttribute, detail);
}