我們先來看效果圖
像這樣的一個帶過渡效果的小部件在我們實際開發中的應用幾率還是比較大的，但是在開發微信小程序的過程中可能有的小伙伴發現transition這個屬性它不好使（下面說明）所以我們這個時候會考慮去使用微信官方提供的wx.createAnimation API來創建動畫。
接下來我帶各位小伙伴如何讓 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> |
