1 line
2.2 KiB
JavaScript
1 line
2.2 KiB
JavaScript
import config from"../common/config";const{prefix:prefix}=config;export default function transition(){return Behavior({properties:{visible:{type:Boolean,value:null,observer:"watchVisible"},appear:Boolean,name:{type:String,value:"fade"},durations:{type:Number,optionalTypes:[Array]}},data:{transitionClass:"",transitionDurations:300,className:"",realVisible:!1},created(){this.status="",this.transitionT=0},attached(){this.durations=this.getDurations(),this.data.visible&&this.enter(),this.inited=!0},detached(){clearTimeout(this.transitionT)},methods:{watchVisible(t,i){this.inited&&t!==i&&(t?this.enter():this.leave())},getDurations(){const{durations:t}=this.data;return Array.isArray(t)?t.map(t=>Number(t)):[Number(t),Number(t)]},enter(){const{name:t,transitionDurations:i}=this.data,[e]=this.durations;this.status="entering",this.setData({realVisible:!0,transitionClass:`${prefix}-${t}-enter ${prefix}-${t}-enter-active`}),clearTimeout(this.transitionT),setTimeout(()=>{this.setData({transitionClass:`${prefix}-${t}-enter-active ${prefix}-${t}-enter-to`})},30),this.transitionT="number"==typeof e&&e>0?setTimeout(this.entered.bind(this),e+30):setTimeout("entering"===this.status?this.entered.bind(this):null,i+30)},entered(){this.customDuration=!1,clearTimeout(this.transitionT),this.status="entered",this.setData({transitionClass:""})},leave(){const{name:t,transitionDurations:i}=this.data,[,e]=this.durations;this.status="leaving",this.setData({transitionClass:`${prefix}-${t}-leave ${prefix}-${t}-leave-active`}),clearTimeout(this.transitionT),setTimeout(()=>{this.setData({transitionClass:`${prefix}-${t}-leave-active ${prefix}-${t}-leave-to`})},30),"number"==typeof e&&e>0?(this.customDuration=!0,this.transitionT=setTimeout(this.leaved.bind(this),e+30)):this.transitionT=setTimeout("leaving"===this.status?this.leaved.bind(this):null,i+30)},leaved(){this.customDuration=!1,this.triggerEvent("leaved"),clearTimeout(this.transitionT),this.status="leaved",this.setData({transitionClass:"",realVisible:!1})},onTransitionEnd(){this.customDuration||(clearTimeout(this.transitionT),"entering"===this.status&&this.data.visible?this.entered():"leaving"!==this.status||this.data.visible||this.leaved())}}})} |