您好,登錄后才能下訂單哦!
演示
演示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 }
三、完整代碼(demo)
git代碼
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。