mpvue小程序循环动画开启暂停

用小程序的animation属性实现循环动画的开启与暂停,并封装到组件。

  • 实现一个字体图标组件的循环旋转动画开启/暂停

    • 用于点击图标,字体颜色变换,开始循环旋转动画,并刷新内容
    • 刷新结束,停止动画,并设置字体颜色为原来的
    • 主要利用setInterval定时器循环执行动画

首先,组件写出来

添加点击事件,动画属性,style属性(用来动态修改样式)

  • src/components/refresh.vue

设置初始数据

使用一个 布尔 数据refreshing判断动画的状态为开启true/暂停false

添加点击事件函数

监听refreshing状态

  • 需要注意的是定时器时间必须和动画的过渡时间设置为相同

组件调用

  • src/pages/index/index.vue




refresh组件完整代码






效果

  • 正常效果,看图中右上角

  • 网速太快

你可能感兴趣的:(mpvue,微信小程序)