咱们先来看效果图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