咱們先來看效果圖git
像這樣的一個帶過渡效果的小部件在咱們實際開發中的應用概率仍是比較大的，可是在開發微信小程序的過程當中可能有的小夥伴發現transition這個屬性它很差使（下面說明）因此咱們這個時候會考慮去使用微信官方提供的wx.createAnimation API來建立動畫。github
接下來我帶各位小夥伴如何讓 transition 屬性在這種需求中好使起來，下面上代碼小程序
page({ data: { show:false//用於顯示或隱藏控件 }, chanMask:function(){ var isShow = this.data.show ? false : true;//若是顯示就隱藏，隱藏就顯示 this.setData({ show:isShow }) } })
/*index.wxss*/ /*顯示前*/ .mask-con{ transition: 1s; position: fixed; width: 100%; height: 300rpx; left: 0; bottom: -300rpx; text-align: center; line-height: 300rpx; box-shadow: 0 1px 10px #aaa; } /*顯示後*/ .mask-con-show{ bottom: 0; }
<!--index.wxml--> <view class="container"> <button bindtap="chanMask">點我</button> <view class="mask-con {{show ? 'mask-con-show' : ''}}"> <view class="close" bindtap="chanMask">X</view> 慢慢飛起 </view> </view>
在以上代碼中咱們首先在data中定義了一個show變量用於mask-con控件的顯示狀態，在chanMask函數中交替的改變這個變量，而後將chanMask函數綁定給button和close控件的點擊事件上，最後咱們根據show來決定是否給mask-con（咱們的動畫控件）添加一個class： mask-con-show那麼到這裏咱們已經實現了一個帶過渡的顯隱小部件，可是對於某些需求這仍是太勉強了，好比下圖的狀況：微信小程序
如今不少的APP或小程序都是以這種方式來close彈窗控件，那個X用戶點的不過癮，看到這裏聰明的小夥伴可能會想到再另外添加一個陰影控件在mask-con的下層並綁定上咱們的chanMask函數，這樣的話陰影控件和咱們的mask-con就可能不是在一個總體上了，不夠直觀，又好比說領導要讓這個陰影它有一個顯示顏色慢慢加深，隱藏慢慢減淡的效果，爲了應對這種狀況，咱們把代碼調整以下：微信
page({ data: { show:false//用於顯示或隱藏mask控件 }, chanMask:function(){ var isShow = this.data.show ? false : true;//若是顯示就隱藏，隱藏就顯示 this.setData({ show:isShow }) } })
/*index.wxss*/ .mask-shadow{ width: 100%; height: 100%; opacity: 0; transition: 1s; } .mask-shadow-on{ opacity: 0.3; } .mask-con{ position: absolute; width: 100%; height: 300rpx; left: 0; bottom: -300rpx; transition: 1s; text-align: center; line-height: 300rpx; box-shadow: 0 1px 10px #aaa; } .mask-con-show{ bottom: 0; }
<!--index.wxml--> <view class="container"> <button bindtap="chanMask">點我</button> <view class="mask {{show ? 'show' : 'hide'}}"> <view class="mask-shadow {{show ? 'mask-shadow-on' : ''}}"></view> <view class="mask-con {{show ? 'mask-con-show' : ''}}"> <view class="close" bindtap="chanMask">X</view> 慢慢飛起 </view> </view> </view>
在這裏咱們設置了兩個樣式類名mask-shadow-on和mask-con-show來定義陰影以及主要控件mask-con動畫後的效果（具體代碼根據本身的需求決定），看起來一切都OK，沒有任何問題，那麼先運行一波，艾瑪，神馬狀況？陰影和咱們的mask-con直接懟了出來毫無過渡效果，那這是何緣由影響咱們程序的效果呢，通過一番考量博主發如今display爲none的狀況之下咱們的transition屬性可能會失效，那到這裏有的小夥伴可能會問 「博主，那個不對啊，咱們明明已經將mask的display設置成block怎麼還有這種問題呢」app
是這樣的，咱們的mask控件它顯示須要那麼一點時間才能徹底顯示出來，可是呢咱們的變量show設置成true以後，咱們的陰影控件和主要控件也會立刻添加上了動畫後樣式類名，這個時間它比mask顯示所需的時間要快，因此咱們的機器它認爲mask仍是處於display爲none的狀況xss
打個比方說：mask是這一整塊的老大，這個老大都還沒表演完事，大家這些作小弟就已經出來搶風頭了，你讓當老大的面子往哪放，不行我得把大家這些搶我風頭的都給幹掉，看大家還得瑟。這個老大的人狠話很少，你搶了他風頭不行，你想不表演他（用戶體驗）也不高興，並且他表演完了還不跟你說，那這個老大這麼難伺候該怎麼辦呢？有的小夥伴已經感受到迷茫了嗎，那還在等什麼，趕快拿起你手中的電話撥打求助熱線。。。。。啊呸，扯遠了ide
其實決解的方法很簡單，沒錯答案就是 setTimeout()函數，來，咱們把代碼再改一遍：函數
page({ data: { show:false,//用於顯示或隱藏mask控件 runAM:false//用於動畫執行的根據 }, chanMask:function(){ var isShow = this.data.show ? false : true;//若是顯示就隱藏，隱藏就顯示 var delay = isShow ? 30 : 1000;//第一個時間是博主測出來控件顯示所需的時間，第二個是動畫所需的時間 if(isShow){ this.setData({ show:isShow }); }else{ this.setData({ runAM:isShow }) } setTimeout(function(){ if(isShow){ this.setData({ runAM:isShow }); }else{ this.setData({ show:isShow }); } }, delay); } })
<!--index.wxml--> <view class="container"> <button bindtap="chanMask">點我</button> <view class="mask {{show ? 'show' : 'hide'}}" bindtap="chanMask"> <view class="mask-shadow {{runAM ? 'mask-shadow-on' : ''}}"></view> <view class="mask-con {{runAM ? 'mask-con-show' : ''}}"> <view class="close" bindtap="chanMask">X</view> 慢慢飛起 </view> </view> </view>
在以上代碼中，咱們給data新添加了一個變量runAM用於動畫什麼時候開始執行的憑證，再在chanMask函數定義了一個用於設置延時的變量delay 代碼可能有點繞博主在此粗暴的解釋一下動畫
程序的整個過程都是根據isShow這個變量來走的，
當isShow爲true時也就是說咱們要打開mask控件了，因此咱們先把mask控件顯示出來，而後在延時30毫秒後去爲要執行動畫的控件添加上樣式類名
當isShow爲false時咱們先把動畫控件的類名去掉（去掉後會執行動畫回到本來的形態），而後在延時1000毫秒（動畫所需的時間）後讓mask隱藏
關於delay的第一個值的設定時博主本身測出來的，若是各位小夥伴還擔憂控件沒顯示的話能夠設成50毫秒或100毫秒都無所這0.1秒的時間差對用戶體驗的影響並不大，如過你設了1秒都沒反應，我只能說換手機吧
最後你會發如今整個過程當中博主都只調用一個函數進行顯示或隱藏，並無爲關閉新建函數處理，這種寫法逼格滿滿有木有
此方法一樣適用於H5
新人第一次寫博客有點囉嗦了，望見諒
GitHub鏈接 https://github.com/1441327053/frontEnd-WXapp/tree/master/widget-transition