2 lines
14 KiB
JavaScript
2 lines
14 KiB
JavaScript
|
import{c as t,w as s,v as e,o as i,a as o,b as a,r as n,n as r,d as l,i as h,e as c,f as d,g as u,h as p,j as m,s as f,k as g,l as k,m as y,p as b,q as w,t as A,u as C,x as S,y as T,z as x,A as R,B as _}from"./index-Br-FhQIZ.js";class ${constructor(s,e){this.options=s,this.animation=t({...s}),this.currentStepAnimates={},this.next=0,this.$=e}_nvuePushAnimates(t,s){let e=this.currentStepAnimates[this.next],i={};if(i=e||{styles:{},config:{}},v.includes(t)){i.styles.transform||(i.styles.transform="");let e="";"rotate"===t&&(e="deg"),i.styles.transform+=`${t}(${s+e}) `}else i.styles[t]=`${s}`;this.currentStepAnimates[this.next]=i}_animateRun(t={},s={}){let e=this.$.$refs.ani.ref;if(e)return new Promise(((i,o)=>{nvueAnimation.transition(e,{styles:t,...s},(t=>{i()}))}))}_nvueNextAnimate(t,s=0,e){let i=t[s];if(i){let{styles:o,config:a}=i;this._animateRun(o,a).then((()=>{s+=1,this._nvueNextAnimate(t,s,e)}))}else this.currentStepAnimates={},"function"==typeof e&&e(),this.isEnd=!0}step(t={}){return this.animation.step(t),this}run(t){this.$.animationData=this.animation.export(),this.$.timer=setTimeout((()=>{"function"==typeof t&&t()}),this.$.durationTime)}}const v=["matrix","matrix3d","rotate","rotate3d","rotateX","rotateY","rotateZ","scale","scale3d","scaleX","scaleY","scaleZ","skew","skewX","skewY","translate","translate3d","translateX","translateY","translateZ"];function B(t,s){if(s)return clearTimeout(s.timer),new $(t,s)}v.concat(["opacity","backgroundColor"],["width","height","left","right","top","bottom"]).forEach((t=>{$.prototype[t]=function(...s){return this.animation[t](...s),this}}));const P=(t,s)=>{const e=t.__vccOpts||t;for(const[i,o]of s)e[i]=o;return e};const E=P({name:"uniTransition",emits:["click","change"],props:{show:{type:Boolean,default:!1},modeClass:{type:[Array,String],default:()=>"fade"},duration:{type:Number,default:300},styles:{type:Object,default:()=>({})},customClass:{type:String,default:""},onceRender:{type:Boolean,default:!1}},data:()=>({isShow:!1,transform:"",opacity:1,animationData:{},durationTime:300,config:{}}),watch:{show:{handler(t){t?this.open():this.isShow&&this.close()},immediate:!0}},computed:{stylesObject(){let t={...this.styles,"transition-duration":this.duration/1e3+"s"},s="";for(let e in t){s+=this.toLine(e)+":"+t[e]+";"}return s},transformStyles(){return"transform:"+this.transform+";opacity:"+this.opacity+";"+this.stylesObject}},created(){this.config={duration:this.duration,timingFunction:"ease",transformOrigin:"50% 50%",delay:0},this.durationTime=this.duration},methods:{init(t={}){t.duration&&(this.durationTime=t.duration),this.animation=B(Object.assign(this.config,t),this)},onClick(){this.$emit("click",{detail:this.isShow})},step(t,s={}){if(this.animation){for(let s in t)try{"object"==typeof t[s]?this.animation[s](...t[s]):this.animation[s](t[s])}catch(e){console.error(`方法 ${s} 不存在`)}return this.animation.step(s),this}},run(t){this.animation&&this.animation.run(t)},open(){clearTimeout(this.timer),this.transform="",this.isShow=!0;let{opacity:t,transform:s}=this.styleInit(!1);void 0!==t&&(this.opacity=t),this.transform=s,this.$nextTick((()=>{this.timer=setTimeout((()=>{this.animation=B(this.config,this),this.tranfromInit(!1).step(),this.animation.run(),this.$emit("change",{detail:this.isShow})}),20)}))},close(t){this.animation&&this.tranfromInit(!0).step().run((()=>{this.isShow=!1,this.animationData=null,this.animation=null;let{opacity:t,transform:s}=this.styleInit(!1);this.opacity=t||1,this.transform=s,this.$emit("change",{detail:this.isShow})}))},styleInit(t){let s={transform:""},e=(t,e)=>{"fade"===e?s.opacity=this.animationType(t)[e]:s.transform+=this.animationType(t)[e]+" "};return"string"==typeof this.modeClass?e(t,this.modeClass):this.modeClass.forEach((s=>{e(t,s)})),s},tranfromInit(t){let s=(t,s)=>{let e=null;"fade"===s?e=t?0:1:(e=t?"-100%":"0","zoom-in"===s&&(e=t?.8:1),"zoom-out"===s&&(e=t?1.2:1),"slide-right"===s&&(e=t?"100%":"0"),"slide-bottom"===s&&(e=t?"100%":"0")),this.animation[this.animationMode()[s]](e)};return"string"==typeof this.modeClass?s(t,this.modeClass):t
|