微信小程序動畫組件使用解析，類似vue，且更強(qiáng)大

/* 預(yù)留過渡 */
/**
*1、fade
*2、移動:up,right,down,left四個(gè)方向
*3、scale縮放：默認(rèn)是從0->1，還預(yù)設(shè)了一個(gè)從1->1.2的
*4、rotate旋轉(zhuǎn)。順時(shí)針旋轉(zhuǎn)。角度用以上方向來指示。如果逆時(shí)針中間加上reserve。
如rotate-right表示選擇180度，rotate-down-reserve表示逆時(shí)針旋轉(zhuǎn)90度。
預(yù)設(shè)了，90,180,270,360；-90.-180，-270，-360角度的旋轉(zhuǎn)
*5、slide：內(nèi)容塊張開還是隱藏。 √

*說明：以上是整體過渡的單元：傳name的時(shí)候，可以多個(gè)組合，形成更加復(fù)雜的過渡。
*如果這些組合，還不夠你的使用，可以部分或全部過渡通過外部傳類來實(shí)現(xiàn)。
*/

externalClasses: [
'enter-class',
'enter-active-class',
'enter-to-class',
'leave-class',
'leave-active-class',
'leave-to-class',
],

externalClasses:[
'custom-class',
]

properties: {
name: {
type: [String,Object,Array],//支持區(qū)分enter、leave過渡
value:{
enter:{
type:[String,Array],
value:['up','fade'],//支持傳數(shù)組，即內(nèi)設(shè)的過渡，可組合
},
leave:"fade"
 }
},
show: {
 type: Boolean,
 value: false
},
duration: { //run Time ms
 type: [String,Number,Object],//`過渡時(shí)間，支持區(qū)分enter、leave。如果enter不需要過渡，enter:0即可`
 value:{
  enter:300,
  leave:300,
 }
},
//leave過渡之后狀態(tài)是否保留。而不是display:none
//帶有mask，避免影響頁面操作。這邊強(qiáng)制禁止保留狀態(tài)。適用于非mask的情況。mask:0和1、2(1、2是全透明的，設(shè)置了屬性雖然不會影響頁面操作。建議不宜保留)
retain:{
 type:Boolean,
 value:false
},
mask: { //`支持選蒙層類型:預(yù)設(shè)5中類型` 以下四個(gè)個(gè)是配套的，針對mask的配置
 type: [String,Number],//如果為0，表示沒有蒙層。1、2：全透明蒙層
 value: '0',
},
//頂部的margin。如果沒有自定義navBar或tabBar則，fixed區(qū)域?yàn)橹虚g的可視區(qū)域。否則為中間可視區(qū)域+自定義bar區(qū)域。
//因此為了兼容，如果自定義了bar，則要傳值進(jìn)來修正蒙層的區(qū)域。
margin:{//記得帶上單位哦。
 type: Object,
 value:{
  top:'0px',
  bottom:'0px',}
},
position: { //`支持卡槽位置:top、right、bottom、left、center`如果有mask，則mask中的卡槽位置是哪里。如果要再偏移，則外部卡槽使用margin來實(shí)現(xiàn)即可
 type: String,
 value: "right",
},
close: { //如果有mask，點(diǎn)擊Mask是否關(guān)閉蒙層
 type: Boolean,
 value: false
}