每次点击,从头开始播放一段动画,怎么做?
发布于 5 年前 作者 pliu 14285 次浏览 来自 问答

目标效果:每次点击,对象的opacity从1变为0。

尝试方法1 - css法

animate: fadeout 3s ease-out forwards;

播放到头停止,但不知道怎么在点击后让它从头开始再播放一次。控制播放并不会从头。

网页版的话可以移除class再添加,但小程序不知道怎么做。

尝试方法2 - 小程序createAnimation

好像每次都会缓慢亮起opacity:1,然后再缓慢谈出opacity:0。

想要的效果是一下子亮起,然后慢慢谈出。

PS:如果再要叠加一个zoom:1.5 -> 1,怎么叠加?好像动画会分两段实现,不是同时。

2 回复

明白了!感谢感谢!

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;

}

}

回到顶部