我们先来看效果图
像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的，但是在开发微信小程序的过程中可能有的小伙伴发现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> |
