jdm_javascript_dom_manipulator

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>_animation.js - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading">C<a href="AnimationOption.html">AnimationOption</a></li><li class="nav-heading">C<a href="Jdm.html">Jdm</a></li><li class="nav-item">F<a href="Jdm.html#jdm_addClassList">jdm_addClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_addEventListener">jdm_addEventListener</a></li><li class="nav-item">F<a href="Jdm.html#jdm_addId">jdm_addId</a></li><li class="nav-item">F<a href="Jdm.html#jdm_append">jdm_append</a></li><li class="nav-item">F<a href="Jdm.html#jdm_appendAfter">jdm_appendAfter</a></li><li class="nav-item">F<a href="Jdm.html#jdm_appendBefore">jdm_appendBefore</a></li><li class="nav-item">F<a href="Jdm.html#jdm_binding">jdm_binding</a></li><li class="nav-item">F<a href="Jdm.html#jdm_bounce">jdm_bounce</a></li><li class="nav-item">F<a href="Jdm.html#jdm_clearAnimations">jdm_clearAnimations</a></li><li class="nav-item">F<a href="Jdm.html#jdm_destroy">jdm_destroy</a></li><li class="nav-item">F<a href="Jdm.html#jdm_empty">jdm_empty</a></li><li class="nav-item">F<a href="Jdm.html#jdm_extendChildNode">jdm_extendChildNode</a></li><li class="nav-item">F<a href="Jdm.html#jdm_extendNode">jdm_extendNode</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeIn">jdm_fadeIn</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInDown">jdm_fadeInDown</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInLeft">jdm_fadeInLeft</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInRight">jdm_fadeInRight</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeInUp">jdm_fadeInUp</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOut">jdm_fadeOut</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutDown">jdm_fadeOutDown</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutLeft">jdm_fadeOutLeft</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutRight">jdm_fadeOutRight</a></li><li class="nav-item">F<a href="Jdm.html#jdm_fadeOutUp">jdm_fadeOutUp</a></li><li class="nav-item">F<a href="Jdm.html#jdm_findClassList">jdm_findClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_genEvent">jdm_genEvent</a></li><li class="nav-item">F<a href="Jdm.html#jdm_getAttribute">jdm_getAttribute</a></li><li class="nav-item">F<a href="Jdm.html#jdm_getValue">jdm_getValue</a></li><li class="nav-item">F<a href="Jdm.html#jdm_innerHTML">jdm_innerHTML</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onChange">jdm_onChange</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onClick">jdm_onClick</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onDebounce">jdm_onDebounce</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onDoubleClick">jdm_onDoubleClick</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onError">jdm_onError</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onInput">jdm_onInput</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onInvalid">jdm_onInvalid</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onLoad">jdm_onLoad</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onRightClick">jdm_onRightClick</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onSelect">jdm_onSelect</a></li><li class="nav-item">F<a href="Jdm.html#jdm_onSubmit">jdm_onSubmit</a></li><li class="nav-item">F<a href="Jdm.html#jdm_prepend">jdm_prepend</a></li><li class="nav-item">F<a href="Jdm.html#jdm_removeAttribute">jdm_removeAttribute</a></li><li class="nav-item">F<a href="Jdm.html#jdm_removeClassList">jdm_removeClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_removeEventListener">jdm_removeEventListener</a></li><li class="nav-item">F<a href="Jdm.html#jdm_rotation">jdm_rotation</a></li><li class="nav-item">F<a href="Jdm.html#jdm_setAttribute">jdm_setAttribute</a></li><li class="nav-item">F<a href="Jdm.html#jdm_setStyle">jdm_setStyle</a></li><li class="nav-item">F<a href="Jdm.html#jdm_setValue">jdm_setValue</a></li><li class="nav-item">F<a href="Jdm.html#jdm_tada">jdm_tada</a></li><li class="nav-item">F<a href="Jdm.html#jdm_toggleClassList">jdm_toggleClassList</a></li><li class="nav-item">F<a href="Jdm.html#jdm_validate">jdm_validate</a></li><li class="nav-item">F<a href="Jdm.html#jdm_zoomIn">jdm_zoomIn</a></li><li class="nav-item">F<a href="Jdm.html#jdm_zoomOut">jdm_zoomOut</a></li><li class="nav-heading">C<a href="Proto.html">Proto</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item">F<a href="global.html#_animation.">_animation.</a></li> </nav> <div id="main"> <h1 class="page-title">_animation.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>/** * 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; } } export const keyframe = { fadeIn: [{ opacity: 0 }, { opacity: 1 }], fadeInDown: [ { opacity: 0, transform: "translate3d(0, -100%, 0)" }, { opacity: 1, transform: "translate3d(0, 0, 0)" }, ], fadeInUp: [ { opacity: 0, transform: "translate3d(0, 100%, 0)" }, { opacity: 1, transform: "translate3d(0, 0, 0)" }, ], fadeInLeft: [ { opacity: 0, transform: "translate3d(-100%, 0, 0)" }, { opacity: 1, transform: "translate3d(0, 0, 0)" }, ], fadeInRight: [ { opacity: 0, transform: "translate3d(100%, 0, 0)" }, { opacity: 1, transform: "translate3d(0, 0, 0)" }, ], fadeOut: [{ opacity: 1 }, { opacity: 0 }], fadeOutDown: [ { opacity: 1, transform: "translate3d(0, 0, 0)" }, { opacity: 0, transform: "translate3d(0, 100%, 0)" }, ], fadeOutUp: [ { opacity: 1, transform: "translate3d(0, 0, 0)" }, { opacity: 0, transform: "translate3d(0, -100%, 0)" }, ], fadeOutLeft: [ { opacity: 1, transform: "translate3d(0, 0, 0)" }, { opacity: 0, transform: "translate3d(-100%, 0, 0)" }, ], fadeOutRight: [ { opacity: 1, transform: "translate3d(0, 0, 0)" }, { opacity: 0, transform: "translate3d(100%, 0, 0)" }, ], bounce: [ { transform: "translateY(0)", easing: "ease" }, { transform: "translateY(-30px)", easing: "ease-in" }, { transform: "translateY(15px)", easing: "ease-out" }, { transform: "translateY(-10px)", easing: "ease-in-out" }, { transform: "translateY(0)", easing: "ease-out" }, ], tada: [ { transform: "scale(1) rotate(0) translateX(0)", transformOrigin: "center center", easing: "ease", }, { transform: "scale(1.1) rotate(-3deg) translateX(-0.1%)", transformOrigin: "center center", easing: "ease-in-out", }, { transform: "scale(1.1) rotate(3deg) translateX(-0.1%)", transformOrigin: "center center", easing: "ease-in-out", }, { transform: "scale(1.1) rotate(-3deg) translateX(-0.1%)", transformOrigin: "center center", easing: "ease-in-out", }, { transform: "scale(1.1) rotate(3deg) translateX(-0.1%)", transformOrigin: "center center", easing: "ease-in-out", }, { transform: "scale(1) rotate(0) translateX(0)", transformOrigin: "center center", easing: "ease-out", }, ], zoomIn: [ { transform: "scale(0)", opacity: 0, transformOrigin: "center center", easing: "ease", }, { transform: "scale(1)", opacity: 1, transformOrigin: "center center", easing: "ease-out", }, ], zoomOut: [ { transform: "scale(1)", opacity: 1, transformOrigin: "center center", easing: "ease-out", }, { transform: "scale(0)", opacity: 0, transformOrigin: "center center", easing: "ease", }, ], rotation: deg => [ { transform: `rotate(${deg}deg)`, transformOrigin: "center center", easing: "linear", }, ], }; export class _animation { /** @this {Jdm} */ static #animate(keyframe, option, callbackFn) { option = { ...new AnimationOption(), ...option }; const animation = this.node.animate(keyframe, option); animation.onfinish = () => { if (typeof callbackFn === "function") { callbackFn(); } }; return animation; } /** @this {Jdm} */ static jdm_clearAnimations() { if (typeof this.node.getAnimations === "function") { this.node.getAnimations().forEach(animation => animation.cancel()); } this.node.style.animation = "none"; this.node.style.transition = "none"; this.node.style.transform = ""; this.node.style.opacity = ""; return this.node; } /** @this {Jdm} */ static jdm_animation(keyframe, callbackFn, option = new AnimationOption()) { _animation.#animate.apply(this, [keyframe, option, callbackFn]); return this.node; } /** @this {Jdm} */ static jdm_hide() { this.jdm_setStyle("visibility", "hide"); this.jdm_setStyle("opacity", 0); return this.node; } /** @this {Jdm} */ static jdm_show() { this.jdm_setStyle("visibility", "visible"); this.jdm_setStyle("opacity", 1); return this.node; } /** @this {Jdm} */ static jdm_fadeIn(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeIn, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeInDown(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeInDown, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeInUp(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeInUp, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeInLeft(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeInLeft, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeInRight(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeInRight, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeOut(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeOut, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeOutDown(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeOutDown, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeOutUp(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeOutUp, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeOutLeft(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeOutLeft, callbackFn, option]); } /** @this {Jdm} */ static jdm_fadeOutRight(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.fadeOutRight, callbackFn, option]); } /** @this {Jdm} */ static jdm_bounce(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.bounce, callbackFn, option]); } /** @this {Jdm} */ static jdm_tada(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.tada, callbackFn, option]); } /** @this {Jdm} */ static jdm_zoomIn(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.zoomIn, callbackFn, option]); } /** @this {Jdm} */ static jdm_zoomOut(callbackFn, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.zoomOut, callbackFn, option]); } /** @this {Jdm} */ static jdm_rotation(callbackFn, deg = 360, option = new AnimationOption()) { return _animation.jdm_animation.apply(this, [keyframe.rotation(deg), callbackFn, option]); } } </code></pre> </article> </section> </div> <footer> Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.4</a> on Wed Jul 16 2025 22:22:23 GMT+0200 (Central European Summer Time) using the Minami theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>