9 lines
6.2 KiB
JavaScript
9 lines
6.2 KiB
JavaScript
/*!
|
|
App Connect Animate CSS
|
|
Version: 3.0.2
|
|
(c) 2024 Wappler.io
|
|
@build 2024-07-05 14:11:55
|
|
*/
|
|
dmx.animate=function(t,e,i,a){return t.cancelAnimate&&t.cancelAnimate(),dmx.animate.clear(t),new Promise(((n,o)=>{const r=`animate__${e}`,s=e=>{t.cancelAnimate=null,e.stopPropagation(),dmx.animate.clear(t),n()};t.cancelAnimate=()=>{t.removeEventListener("animationend",s),dmx.animate.clear(t),o()},a&&t.style.setProperty("--animate-delay",a+"ms"),i&&t.style.setProperty("--animate-duration",i+"ms"),t.classList.add("animate__animated",r),t.addEventListener("animationend",s,{once:!0})}))},dmx.animate.clear=function(t){t.style.removeProperty("--animate-delay"),t.style.removeProperty("--animate-duration"),t.classList.remove("animate__animated",...dmx.animate.effects.map((t=>"animate__"+t)))},dmx.animate.effects=["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomLeft","fadeOutBottomRight","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","jackInTheBox","rollIn","rollOut","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"],dmx.animate.observer=new IntersectionObserver((t=>{t.forEach((t=>{const{inview:e,outview:i}=t.target;t.target.ratio=t.intersectionRatio,t.target.animateVisible||t.target.style.setProperty("visibility","hidden"),t.intersectionRatio>=e.ratio?t.target.animateVisible||(t.target.animating=!0,t.target.animateVisible=!0,t.target.style.removeProperty("visibility"),dmx.animate(t.target,e.effect,e.duration,e.delay).then((()=>{t.target.animating=!1,t.target.style.removeProperty("visibility")})).catch((()=>{}))):i&&t.target.animateVisible&&(t.target.animating=!0,t.target.animateVisible=!1,dmx.animate(t.target,i.effect,i.duration,i.delay).then((()=>{t.target.animating=!1,t.target.style.setProperty("visibility","hidden")})).catch((()=>{})))}))}),{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]}),dmx.Component("animate",{initialData:{animating:!1,visible:!1},attributes:{showeffect:{type:String,default:null},hideeffect:{type:String,default:null},showduration:{type:Number,default:null},hideduration:{type:Number,default:null},showdelay:{type:Number,default:0},hidedelay:{type:Number,default:0},visible:{type:Boolean,default:!1}},methods:{animate(t,e){this.props.visible&&dmx.animate(this.$node,t,e)}},init(t){this.props.visible||t.style.setProperty("visibility","hidden")},performUpdate(t){t.has("visible")&&(this.props.visible?(this.props.showeffect&&(this.set("animating",!0),dmx.animate(this.$node,this.props.showeffect,this.props.showduration,this.props.showdelay).then((()=>{this.set("animating",!1)})).catch((()=>{}))),console.log("remove visibility"),this.$node.style.removeProperty("visibility")):this.props.hideeffect&&(this.set("animating",!0),dmx.animate(this.$node,this.props.hideeffect,this.props.hideduration,this.props.hidedelay).then((()=>{this.set("animating",!1),console.log("add visibility"),this.$node.style.setProperty("visibility","hidden")})).catch((()=>{}))),this.set("visible",this.props.visible))}}),dmx.Attribute("animate-inview","mounted",(function(t,e){return t.inview={effect:e.value,delay:e.modifiers.delay,duration:e.modifiers.duration,ratio:(parseInt(e.argument,10)||100)/100},t.style.setProperty("visibility","hidden"),dmx.animate.observer.observe(t),()=>{dmx.animate.observer.unobserve(t)}})),dmx.Attribute("animate-outview","mounted",(function(t,e){t.outview={effect:e.value,delay:e.modifiers.delay,duration:e.modifiers.duration,ratio:(parseInt(e.argument,10)||100)/100}})),dmx.Attribute("animate-enter","mounted",(function(t,e){const{value:i,modifiers:a}=e,{delay:n,duration:o,random:r}=a;dmx.animate(t,i,o,(r?10*Math.random():this.data.$index)*n)})),dmx.Attribute("animate-leave","mounted",(function(t,e){const{value:i,modifiers:a}=e,{delay:n,duration:o,random:r}=a;t.addEventListener("remove",(e=>{e.preventDefault();const a={top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth,height:t.offsetHeight};requestAnimationFrame((()=>{t.style.setProperty("position","absolute"),t.style.setProperty("top",a.top),t.style.setProperty("left",a.left),t.style.setProperty("width",a.width),t.style.setProperty("height",a.height),t.offsetParent.appendChild(t),dmx.animate(t,i,o,(r?10*Math.random():this.data.$index)*n)}))}))})),dmx.Attribute("animate-move","mounted",(function(t,e){if("repeat-item"!==this.type)return void console.warn("Attribute animate-move is only allowed on repeat items");if(!this.parent.props.key)return void console.warn("Attribute animate-move can only be used on keyed repeaters");const{delay:i,duration:a,random:n}=e.modifiers,o=["linear","ease-in","ease-out","ease-in-out"].find((t=>!!e.modifiers[t])),r=this.parent,s=e=>{t.pos=t.getBoundingClientRect()},d=e=>{t.pos&&(t.style.removeProperty("transform"),t.style.removeProperty("transition"),requestAnimationFrame((()=>{const{left:e,top:r}=t.getBoundingClientRect();t.style.setProperty("transform",`translate(${t.pos.left-e}px, ${t.pos.top-r}px)`),requestAnimationFrame((()=>{t.style.setProperty("transition",`transform ${a||800}ms ${o||"ease"} ${i?(n?10*Math.random():this.data.$index)*i:0}ms`),t.style.removeProperty("transform")}))})))};return r.addEventListener("update",s),r.addEventListener("updated",d),()=>{r.removeEventListener("update",s),r.removeEventListener("updated",d)}}));
|
|
//# sourceMappingURL=dmxAnimateCSS.js.map
|