目标效果：每次点击，对象的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;
}
}
感谢！
但是这个是点一次移除class，然后下次点击加上吧？
如果我要播放完自动停止，下次点击从头播放的话呢？
data里面设置ani为false,js改一下
toogleani(){
this.setData({
ani:true
},()=>{
setTimeout(()=>{
this.setData({
ani: false
})
},1000)
})
},
感谢感谢！很有启发！
其实这样一来，简单动画我可以直接transition了，设两个或多个class切换状态就可以了。
对