目标效果:每次点击,对象的opacity从1变为0。
尝试方法1 - css法
animate: fadeout 3s ease-out forwards;
播放到头停止,但不知道怎么在点击后让它从头开始再播放一次。控制播放并不会从头。
网页版的话可以移除class再添加,但小程序不知道怎么做。
尝试方法2 - 小程序createAnimation
好像每次都会缓慢亮起opacity:1,然后再缓慢谈出opacity:0。
想要的效果是一下子亮起,然后慢慢谈出。
PS:如果再要叠加一个zoom:1.5 -> 1,怎么叠加?好像动画会分两段实现,不是同时。
js:
toogleani(){
this.setData({
ani:!this.data.ani
})
},
wxml:
<view class=’{{ani?“ani”:""}}’>
一些内容
</view>
<view bindtap=‘toogleani’>打开OR关闭动画</view>
wxss:
.ani{
animation: fadeout 3s ease-out forwards;
}
@keyframes fadeout {
100%{
opacity: 1;
}
0%{
opacity: 0;
}
}