triggle
Version:
A lightweight CSS animation trigger library that animates elements on click, hover, enter and more.
3 lines (2 loc) • 3.72 kB
JavaScript
!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";!function(){const t=["touchstart","touchend","scroll"],e=new WeakMap;function r(t,e,r=!1,i,a,g=!1,n){if(window.__trg_TRIGGER_DISABLED)return;i&&(t.style.animationDelay=i),a&&(t.style.animationDuration=a);const o=e.split(" ").filter(Boolean);g?o.forEach(e=>t.classList.toggle(e)):o.forEach(e=>t.classList.add(e));const l=()=>{t.style.animationDelay="",t.style.animationDuration=""};if(r&&!g){const r=()=>{o.forEach(e=>t.classList.remove(e)),l(),t.removeEventListener("animationend",r),t.dispatchEvent(new CustomEvent("triggle:animationEnd",{detail:{class:e}})),"function"==typeof n&&n()};t.addEventListener("animationend",r)}else l(),"function"==typeof n&&n()}function i(t,a=null){const g=t.getAttribute("data-triggle-class"),n="true"===t.getAttribute("data-triggle-reset"),o=t.getAttribute("data-triggle-delay"),l=t.getAttribute("data-triggle-duration"),u="true"===t.getAttribute("data-triggle-toggle"),s=t.getAttribute("data-triggle-target"),d=t.getAttribute("data-triggle-next"),c=parseInt(t.getAttribute("data-triggle-chain-delay"),10)||0,f="true"===t.getAttribute("data-triggle-chain-loop"),A=t.getAttribute("data-triggle-group"),b=parseInt(t.getAttribute("data-triggle-stagger"),10)||0,y=function(t,r){if(!r)return t;if(e.has(t))return e.get(t);const i=r.startsWith(".")||r.startsWith("#")?document.querySelector(r):t.closest(r);return i&&e.set(t,i),i}(t,s);if(!y)return;r(y,g,n,o,l,u,()=>{if(d){const e=document.querySelector(d);if(e){const g=e.getAttribute("data-triggle-class"),n="true"===e.getAttribute("data-triggle-reset"),o=e.getAttribute("data-triggle-delay"),l=e.getAttribute("data-triggle-duration"),u="true"===e.getAttribute("data-triggle-toggle");setTimeout(()=>{r(e,g,n,o,l,u,()=>{f&&a?setTimeout(()=>{i(a,a)},c):f&&!a&&i(t,t)})},c)}}if(A){document.querySelectorAll(`[data-triggle-group="${A}"]`).forEach((t,e)=>{const i=t.getAttribute("data-triggle-class"),a="true"===t.getAttribute("data-triggle-reset"),g=t.getAttribute("data-triggle-delay"),n=t.getAttribute("data-triggle-duration"),o="true"===t.getAttribute("data-triggle-toggle");r(t,i,a,b>0?e*b+"ms":g,n,o)})}})}function a(){document.querySelectorAll("[data-triggle]").forEach(e=>{const a=e.getAttribute("data-triggle").split(",").map(t=>t.trim()),g=e.getAttribute("data-triggle-key"),n="true"===e.getAttribute("data-triggle-once"),o="true"===e.getAttribute("data-triggle-scroll"),l=e.getAttribute("data-triggle-group"),u=parseInt(e.getAttribute("data-triggle-stagger"),10)||0,s=t=>{("keydown"!==t.type&&"keyup"!==t.type||!g||function(t,e){return t.split(",").map(t=>t.trim().toLowerCase()).some(t=>{const r=t.split("+"),i=r.pop(),a=r,g=i===e.key.toLowerCase(),n=a.every(t=>"ctrl"===t&&e.ctrlKey||"shift"===t&&e.shiftKey||"alt"===t&&e.altKey);return g&&(0===a.length||n)})}(g,t))&&(i(e),n&&e.removeEventListener(t.type,s))};a.forEach(a=>{if(o&&"scroll"===a){new IntersectionObserver((t,a)=>{t.forEach(t=>{if(t.isIntersecting){if(l){document.querySelectorAll(`[data-triggle-group="${l}"]`).forEach((t,e)=>{const i=t.getAttribute("data-triggle-class"),a="true"===t.getAttribute("data-triggle-reset"),g=t.getAttribute("data-triggle-delay"),n=t.getAttribute("data-triggle-duration"),o="true"===t.getAttribute("data-triggle-toggle");r(t,i,a,u>0?e*u+"ms":g,n,o)})}else i(e);n&&a.unobserve(t.target)}})},{threshold:.5}).observe(e)}else e.addEventListener(a,s,!!t.includes(a)&&{passive:!0})})})}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",a):a(),window.triggle={init:a,destroy:function(){document.querySelectorAll("[data-triggle]").forEach(t=>{t.replaceWith(t.cloneNode(!0))})},apply:r}}()});
//# sourceMappingURL=triggle.min.js.map