是什么动画?是wx.createAnimation还是css3动画?在bindtransitionend或bindanimationend绑定的事件函数里进行动画结束后的操作好些
| transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | |
| animationstart | 会在一个 WXSS animation 动画开始时触发 | |
| animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | |
| animationend | 会在一个 WXSS animation 动画完成时触发 |
我看大家都是这样用的，感觉这种语言设计，好弱智
setTimeout(function(){
self.setData({判断display的值})
},动画所需时间);
bindtransitionend 我也没看到有，不过这样的写法 看起来还高端一些
在 css 样式类里定义一个 @keyframe 动画，在点击的时候把这个类名赋给animation，然后display：block或者none，会在动画执行完毕之后执行display动作。也可以考虑微信的动画wx.createAnimation也可以实现，不过个人习惯采用第一种。
我写了两种，两个不太一样，你自己考虑哪种合适。
第一种：
css：
@keyframes anmationStart{
from{
/* display: none; */
opacity: 0;
}
to{
/* display:inline-block; */
opacity: 1;
}
}
@keyframes maskStart{
from{
/* display: none; */
opacity: 0;
}
to{
/* display:inline-block; */
opacity: 0.5;
}
}
.termsServer{
position: fixed;
width: 650rpx;
height: 800rpx;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
background: white;
z-index: 10000000;
border: 1px solid #ccc;
overflow: hidden;
}
html： {{animation}}为js控制的名称 内容是 maskStart，动画的名称 {{display}}为none或者block，由点击事件控制改变赋值。
<view class=‘termsServer’ style=“animation:{{animation}} 1s;display:{{display}}”>
<view class=‘mask’ bindtap=‘cancelTerms’ style=“animation:{{maskAnimation}} 1s;display:{{display}}”></view>
第二种：
.mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 888;
}
.chooseBox {
position: fixed;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 999;
}
@keyframes opcityStart{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
html：
<view class=‘mask’ style="{{showFlag?‘animation:opacityStart 5s;display:block’:‘display:none’}}"></view>
<view class=“chooseBox” style="{{showFlag?‘animation:opcityStart 1s;display:block’:‘display:none’}}">
强力驱动