/**
* Opzioni per l'animazione.
*/
export class AnimationOption {
/**
* @param {number} duration - Durata dell'animazione in millisecondi.
* @default 250
*
* @param {'linear'|'ease'|'ease-in'|'ease-out'|'ease-in-out'} easing - Funzione di easing dell'animazione.
* @default 'easeInOut'
*
* @param {'none'|'forwards'|'backwards'|'both'|'auto'} fill - Stile applicato fuori dall'intervallo dell'animazione.
* @default 'forwards'
*
* @param {number} delay - Ritardo dell'inizio dell'animazione in millisecondi.
* @default 0
*
* @param {'replace'|'add'|'accumulate'} composite - Modalità di composizione dell’animazione.
* @default 'replace'
*
* @param {'normal'|'reverse'|'alternate'|'alternate-reverse'} direction - Direzione di riproduzione dell'animazione.
* @default 'normal'
*
* @param {number|string} iterations - Numero di volte che l'animazione verrà ripetuta.
* @default 1
*/
constructor(duration = 250, easing = "ease-in-out", fill = "forwards", delay = 0, composite = "replace", direction = "normal", iterations = 1) {
this.duration = duration;
this.easing = easing;
this.fill = fill;
this.delay = delay;
this.composite = composite;
this.direction = direction;
this.iterations = iterations;
}
}
/**
* @typedef {Object} AnimationMethods
* @property {function(): HTMLElement} jdm_fadeIn
* @property {function(): HTMLElement} jdm_fadeOut
* @property {function(): HTMLElement} jdm_fadeInDown
* @property {function(): HTMLElement} jdm_fadeInUp
* @property {function(): HTMLElement} jdm_fadeInLeft
* @property {function(): HTMLElement} jdm_fadeInRight
*/
export class Animation {
/**
* Applica un'animazione di fade-in sul nodo.
*
* @param {object} [option=new AnimationOption()] - Opzioni dell'animazione.
* @param {function(): void} [callback] - Funzione da eseguire al termine dell'animazione.
* @returns {Jdm} - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
* @example
* JDM(`<div class="foo"> FadeIn </div>`, document.body)
* .jdm_fadeIn(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})
*/
static jdm_fadeIn(callback, option = new AnimationOption()) {
option = { ...new AnimationOption(), ...option };
const animation = this.node.animate([{ opacity: 0 }, { opacity: 1 }], option);
animation.onfinish = () => {
if (typeof callback === "function") {
callback();
}
};
return this.node;
}
/**
* Applica un'animazione tipo fadeInDown al nodo (come in animate.css).
*
* @param {function(): void} [callback] - Funzione da eseguire al termine dell'animazione.
* @param {Partial<AnimationOption>} [option=new AnimationOption()] - Opzioni dell'animazione.
* @returns {Jdm} - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
* @example
* JDM(`<div class="foo"> FadeInDown </div>`, document.body)
* .jdm_fadeInDown(() => console.log('done'), { duration: 1000, easing: 'ease-out' });
*/
static jdm_fadeInDown(callback, option = new AnimationOption()) {
option = { ...new AnimationOption(), ...option };
const keyframes = [
{ opacity: 0, transform: "translate3d(0, -100%, 0)" },
{ opacity: 1, transform: "translate3d(0, 0, 0)" },
];
const animation = this.node.animate(keyframes, option);
animation.onfinish = () => {
if (typeof callback === "function") {
callback();
}
};
return this.node;
}
/**
* Applica un'animazione tipo fadeInUp al nodo (come in animate.css).
*
* @param {function(): void} [callback] - Funzione da eseguire al termine dell'animazione.
* @param {Partial<AnimationOption>} [option=new AnimationOption()] - Opzioni dell'animazione.
* @returns {Jdm} - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
* @example
* JDM(`<div class="foo"> FadeInUp </div>`, document.body)
* .jdm_fadeInUp(() => console.log('Fade in up concluso'), { duration: 800 });
*/
static jdm_fadeInUp(callback, option = new AnimationOption()) {
option = { ...new AnimationOption(), ...option };
const keyframes = [
{ opacity: 0, transform: "translate3d(0, 100%, 0)" },
{ opacity: 1, transform: "translate3d(0, 0, 0)" },
];
const animation = this.node.animate(keyframes, option);
animation.onfinish = () => {
if (typeof callback === "function") {
callback();
}
};
return this.node;
}
/**
* Applica un'animazione tipo fadeInLeft al nodo (come in animate.css).
*
* @param {function(): void} [callback] - Funzione da eseguire al termine dell'animazione.
* @param {Partial<AnimationOption>} [option=new AnimationOption()] - Opzioni dell'animazione.
* @returns {Jdm} - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
* @example
* JDM(`<div class="foo"> FadeInLeft </div>`, document.body)
* .jdm_fadeInLeft(() => console.log('Fade in left concluso'), { duration: 800 });
*/
static jdm_fadeInLeft(callback, option = new AnimationOption()) {
option = { ...new AnimationOption(), ...option };
const keyframes = [
{ opacity: 0, transform: "translate3d(-100%, 0, 0)" },
{ opacity: 1, transform: "translate3d(0, 0, 0)" },
];
const animation = this.node.animate(keyframes, option);
animation.onfinish = () => {
if (typeof callback === "function") {
callback();
}
};
return this.node;
}
/**
* Applica un'animazione tipo fadeInRight al nodo (come in animate.css).
*
* @param {function(): void} [callback] - Funzione da eseguire al termine dell'animazione.
* @param {Partial<AnimationOption>} [option=new AnimationOption()] - Opzioni dell'animazione.
* @returns {Jdm} - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
* @example
* JDM(`<div class="foo"> FadeInRight </div>`, document.body)
* .jdm_fadeInRight(() => console.log('Fade in right concluso'), { duration: 800 });
*/
static jdm_fadeInRight(callback, option = new AnimationOption()) {
option = { ...new AnimationOption(), ...option };
const keyframes = [
{ opacity: 0, transform: "translate3d(100%, 0, 0)" },
{ opacity: 1, transform: "translate3d(0, 0, 0)" },
];
const animation = this.node.animate(keyframes, option);
animation.onfinish = () => {
if (typeof callback === "function") {
callback();
}
};
return this.node;
}
/**
* Applica un'animazione di fade-out sul nodo.
*
* @param {function(): void} [callback] - Funzione da eseguire al termine dell'animazione.
* @param {Partial<AnimationOption>} [option=new AnimationOption()] - Opzioni dell'animazione.
* @returns {Jdm} - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
* @example
*
* JDM(`<div class="foo"> FadeOut </div>`, document.body)
* .jdm_fadeOut(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})
*/
static jdm_fadeOut(callback, option = new AnimationOption()) {
console.log(callback, option);
const animation = this.node.animate([{ opacity: 1 }, { opacity: 0 }], option);
animation.onfinish = () => {
if (typeof callback === "function") {
callback();
}
};
return this.node;
}
}