微信小程序動(dòng)畫組件使用解析,類似vue,且更強(qiáng)大
演示
演示1
演示2
演示3
一、功能描述
1、預(yù)設(shè)過(guò)渡
- 支持區(qū)分enter、leave
- 支持預(yù)設(shè)過(guò)渡的組合
- 特別強(qiáng)調(diào):支持元素展開、閉合的過(guò)渡。name=='slide'或['slide'[,]],即可實(shí)現(xiàn),無(wú)需外部傳height
- 支持外部傳類來(lái)過(guò)渡或動(dòng)畫
/* 預(yù)留過(guò)渡 */ /** *1、fade *2、移動(dòng):up,right,down,left四個(gè)方向 *3、scale縮放:默認(rèn)是從0->1,還預(yù)設(shè)了一個(gè)從1->1.2的 *4、rotate旋轉(zhuǎn)。順時(shí)針旋轉(zhuǎn)。角度用以上方向來(lái)指示。如果逆時(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)容塊張開還是隱藏。 √ *說(shuō)明:以上是整體過(guò)渡的單元:傳name的時(shí)候,可以多個(gè)組合,形成更加復(fù)雜的過(guò)渡。 *如果這些組合,還不夠你的使用,可以部分或全部過(guò)渡通過(guò)外部傳類來(lái)實(shí)現(xiàn)。 */
2、蒙層相關(guān)功能
- 無(wú)蒙層:mask:0。//此時(shí)過(guò)渡元素為卡槽
- 透明蒙層1:mask:1。//此時(shí)過(guò)渡元素為卡槽。如:左移100%,只是移動(dòng)卡槽寬度的100%
- 透明蒙層2:mask:2。//此時(shí)過(guò)渡元素為蒙層。如:左移100%,則是移動(dòng)蒙層寬度的100%
- 半透明蒙層3:mask:3。///此時(shí)過(guò)渡元素為蒙層。如:彈窗上移,則是蒙層上移。
- 半透明蒙層4:mask:4。///此時(shí)過(guò)渡元素為卡槽。如:彈窗上移,則是蒙層自身是縮放。卡槽上移
3、卡槽樣式完美設(shè)置
- 由以上可知。蒙層由多種情況。但
- 完美支持百分比設(shè)置:外部傳custom-class即可
4、其它細(xì)節(jié)
- 完美支持自定義top、tab導(dǎo)航情況
- 蒙層(包括透明蒙層)下,預(yù)設(shè)5個(gè)布局位置:結(jié)合方向等,可實(shí)現(xiàn)左右抽屜、上下彈出、中間淡入淡出等效果
- 支持leave動(dòng)畫結(jié)束后,通知父節(jié)點(diǎn):可實(shí)現(xiàn)多節(jié)點(diǎn)聯(lián)動(dòng)。如:手風(fēng)琴效果
5、支持所有的節(jié)點(diǎn)。包括組件作為卡槽內(nèi)容
- 對(duì)需要?jiǎng)赢嫷脑?組件套上這個(gè)組件即可實(shí)現(xiàn)過(guò)渡動(dòng)畫
- 其實(shí)整個(gè)小程序頁(yè)面做進(jìn)入過(guò)渡,也挺炫酷的。類似支付寶頁(yè)面進(jìn)螞蟻森林
二、可傳屬性(可配置項(xiàng))
過(guò)渡相關(guān)類
externalClasses: [ 'enter-class', 'enter-active-class', 'enter-to-class', 'leave-class', 'leave-active-class', 'leave-to-class', ],
內(nèi)容(卡槽)樣式
externalClasses:[ 'custom-class', ]
說(shuō)明:完美支持像素、百分比、或者absolute的設(shè)置
配置項(xiàng)
properties: { name: { type: [String,Object,Array],//支持區(qū)分enter、leave過(guò)渡 value:{ enter:{ type:[String,Array], value:['up','fade'],//支持傳數(shù)組,即內(nèi)設(shè)的過(guò)渡,可組合 }, leave:"fade" } }, show: { type: Boolean, value: false }, duration: { //run Time ms type: [String,Number,Object],//`過(guò)渡時(shí)間,支持區(qū)分enter、leave。如果enter不需要過(guò)渡,enter:0即可` value:{ enter:300, leave:300, } }, //leave過(guò)渡之后狀態(tài)是否保留。而不是display:none //帶有mask,避免影響頁(yè)面操作。這邊強(qiáng)制禁止保留狀態(tài)。適用于非mask的情況。mask:0和1、2(1、2是全透明的,設(shè)置了屬性雖然不會(huì)影響頁(yè)面操作。建議不宜保留) retain:{ type:Boolean, value:false }, mask: { //`支持選蒙層類型:預(yù)設(shè)5中類型` 以下四個(gè)個(gè)是配套的,針對(duì)mask的配置 type: [String,Number],//如果為0,表示沒(méi)有蒙層。1、2:全透明蒙層 value: '0', }, //頂部的margin。如果沒(méi)有自定義navBar或tabBar則,fixed區(qū)域?yàn)橹虚g的可視區(qū)域。否則為中間可視區(qū)域+自定義bar區(qū)域。 //因此為了兼容,如果自定義了bar,則要傳值進(jìn)來(lái)修正蒙層的區(qū)域。 margin:{//記得帶上單位哦。 type: Object, value:{ top:'0px', bottom:'0px',} }, position: { //`支持卡槽位置:top、right、bottom、left、center`如果有mask,則mask中的卡槽位置是哪里。如果要再偏移,則外部卡槽使用margin來(lái)實(shí)現(xiàn)即可 type: String, value: "right", }, close: { //如果有mask,點(diǎn)擊Mask是否關(guān)閉蒙層 type: Boolean, value: false }
三、完整代碼(demo)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue 組件注冊(cè)全解析
- Vue組件生命周期運(yùn)行原理解析
- Vue實(shí)現(xiàn)圖片輪播組件思路及實(shí)例解析
- Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
- VUE注冊(cè)全局組件和局部組件過(guò)程解析
- vue 使用高德地圖vue-amap組件過(guò)程解析
- 解析vue路由異步組件和懶加載案例
- 解析Vue.js中的組件
- Vue中強(qiáng)制組件重新渲染的正確方法
- vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁(yè)面不渲染操作
- Vue切換Tab動(dòng)態(tài)渲染組件的操作
- vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作
- Vue強(qiáng)制組件重新渲染的方法討論
- vue組件是如何解析及渲染的?
相關(guān)文章
Javascript中replace方法與正則表達(dá)式的結(jié)合使用教程
replace方法是javascript涉及到正則表達(dá)式中較為復(fù)雜的一個(gè)方法,嚴(yán)格上說(shuō)應(yīng)該是string對(duì)象的方法,下面這篇文章主要給大家介紹了關(guān)于Javascript中replace方法與正則表達(dá)式的結(jié)合使用的相關(guān)資料,需要的朋友可以參考下2022-09-09引入autocomplete組件時(shí)JS報(bào)未結(jié)束字符串常量錯(cuò)誤
在引入jQuery的autocomplete組件時(shí),遇到j(luò)s報(bào)未結(jié)束字符串常量錯(cuò)誤,原因及解決方法如下,大家可以參考下2014-03-03js網(wǎng)頁(yè)中的(運(yùn)行代碼)功能實(shí)現(xiàn)思路
網(wǎng)頁(yè)中的"運(yùn)行代碼"是一個(gè)很方便的功能,可以直接看到代碼的效果,感興趣的朋友不妨參考下,或許對(duì)你學(xué)習(xí)js有所幫助,好了花不多說(shuō)切入正題2013-02-02JavaScript基礎(chǔ)之流程控制語(yǔ)句的用法
下面就為大家?guī)?lái)一篇JavaScript基礎(chǔ)之流程控制語(yǔ)句的用法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123,123.456,0xff 之類的數(shù)字格式。 其實(shí) js 格式還有很多數(shù)字格式類型,比如 1., .1 這樣的,也有 .1e2 這樣的。2014-05-05es6中new.target的作用和使用場(chǎng)景簡(jiǎn)單示例分析
這篇文章主要介紹了es6中new.target的作用和使用場(chǎng)景,結(jié)合簡(jiǎn)單示例形式分析了es6中new.target的基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法
這篇文章主要介紹了JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06JavaScript中條件語(yǔ)句的優(yōu)化技巧總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中條件語(yǔ)句的優(yōu)化技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12