maz-ui/dist/chunks/MazAnimatedElement.MfSMXN3O.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{computed,createElementBlock,defineComponent,nextTick,normalizeStyle,onBeforeUnmount,onMounted,openBlock,ref,renderSlot}from"vue";import '../assets/MazAnimatedElement.v3g68Xpj.css';var MazAnimatedElement_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazAnimatedElement`,props:{direction:{default:`up`},delay:{default:0},duration:{default:2e3},once:{type:Boolean,default:!0}},setup(__props){let animatedClass=computed(()=>`animate-slide-${__props.direction}-blur`);let element=ref();let isAnimated=ref(!1);let observer=null;let animationFrameId=null;function triggerAnimation(){animationFrameId=requestAnimationFrame(()=>{element.value&&(element.value.classList.remove(`--invisible`),element.value.classList.add(animatedClass.value),isAnimated.value=!0)})}function resetAnimation(){element.value&&(element.value.classList.add(`--invisible`),element.value.classList.remove(animatedClass.value),isAnimated.value=!1)}return onMounted(()=>{observer=new IntersectionObserver(([entry])=>{entry.isIntersecting&&!isAnimated.value?(nextTick(()=>{setTimeout(triggerAnimation,__props.delay)}),__props.once===!0&&observer?.unobserve(entry.target)):__props.once===!1&&!entry.isIntersecting&&resetAnimation()}),element.value&&observer.observe(element.value)}),onBeforeUnmount(()=>{observer?.disconnect(),animationFrameId&&cancelAnimationFrame(animationFrameId)}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{ref_key:`element`,ref:element,class:`m-animated-element m-reset-css --invisible`,style:normalizeStyle({animationDuration:`${__props.duration}ms`})},[renderSlot(_ctx.$slots,`default`,{},void 0,!0)],4))}}),[[`__scopeId`,`data-v-5891b044`]]);export{MazAnimatedElement_default as t};