演示

演示1

演示2

演示3

一、功能描述

1、預設過渡

/* 預留過渡 *//***1、fade*2、移動:up,right,down,left四個方向*3、scale縮放：默認是從0->1，還預設了一個從1->1.2的*4、rotate旋轉。順時針旋轉。角度用以上方向來指示。如果逆時針中間加上reserve。如rotate-right表示選擇180度，rotate-down-reserve表示逆時針旋轉90度。預設了，90,180,270,360；-90.-180，-270，-360角度的旋轉*5、slide：內容塊張開還是隱藏。 √*說明：以上是整體過渡的單元：傳name的時候，可以多個組合，形成更加復雜的過渡。*如果這些組合，還不夠你的使用，可以部分或全部過渡通過外部傳類來實現。*/

2、蒙層相關功能

3、卡槽樣式完美設置

4、其它細節

5、支持所有的節點。包括組件作為卡槽內容

二、可傳屬性(可配置項)

過渡相關類

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

內容(卡槽)樣式

externalClasses:['custom-class',]

說明：完美支持像素、百分比、或者absolute的設置

配置項

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