利⽤csstransition属性实现⼀个带动画显隐的⼩程序部件我们先来看效果图
像这样的⼀个带过渡效果的⼩部件在我们实际开发中的应⽤⼏率还是⽐较⼤的，但是在开发⼩程序的过程中可能有的⼩伙伴发现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>
box shadow怎么设置在这⾥我们设置了两个样式类名mask-shadow-on和mask-con-show来定义阴影以及主要控件mask-con动画后的效果（具体代码根据⾃⼰的需求决定），看起来⼀切都OK，没有任何问题，那么先运⾏⼀波，艾玛，神马情况？阴影和我们的mask-con直接怼了出来毫⽆过渡效果，那这是何原因影响我们程序的效果呢，经过⼀番考量博主发现在display为none的情况之下我们的transition属性可能会失效，那到这⾥有的⼩伙伴可能会问 “博主，那个不对啊，我们明明已经将mask的display设置成block怎么还有这种问题呢”
是这样的，我们的mask控件它显⽰需要那么⼀点时间才能完全显⽰出来，但是呢我们的变量show设置成true之后，我们的阴影控件和主要控件也会马上添加上了动画后样式类名，这个时间它⽐mask显⽰所需的时间要快，所以我们的机器它认为mask还是处于display为none的情况
打个⽐⽅说：mask是这⼀整块的⽼⼤，这个⽼⼤都还没表演完事，你们这些做⼩弟就已经出来抢风头了，你让当⽼⼤的⾯⼦往哪放，不⾏我得把你们这些抢我风头的都给⼲掉，看你们还得瑟。这个⽼⼤的⼈狠话不多，你抢了他风头不⾏，你想不表演他（⽤户体验）也不⾼兴，⽽且他表演完了还不跟你说，那这个⽼⼤这么难伺候该怎么办呢？有的⼩伙伴已经感觉到迷茫了吗，那还在等什么，赶快拿起你⼿中的电话拨打求助热线。。。。。啊呸，扯远了
其实决解的⽅法很简单，没错答案就是 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连接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。