在Uniapp中使用animation注意事项

Uniapp&animation

      在uniapp中实现动画效果，有几种方式

1.将动画执行命令animation放在写好的class中，动态添加class类名

2.直接将animation放在行内style中

做好CSS动画代码，将animation开启动画的钥匙写在一个选择器中，然后使用JS在合适的时机去动态的添加或移除，达到动画的效果。这逻辑看起来蛮简单的，但是其中会有几个要注意的点

v-bind元素上绑定class

nextTick中执行清除data中的class

异步执行赋值data中的class

绑定动态的样式比较简单，注意这里确认是双向数据绑定的，因为类名会频繁切换的，这需要被监听到，每次修正数据时进行页面的重新渲染。

如果需要重复执行动画，就需要将上次的类名进行清除，再次进行重新绑定，这样就能引起页面数据的变化，重新构建虚拟DOM。

netxTick这一步在我初次尝试是被忽略，导致我很迷惑，明明已经运行到了，但是动画没有一点反应，我竟然也没意识到是页面未挂载完毕，因素有很多，我也不太确定是哪个。它的作用在于等虚拟DOM构建完成，放在真实DOM中之后进行调用的回调函数。能确保数据，结构都是稳定的。

使用nextTick后，就会出现动画只触发一次的现象，这是因为将类名清空的操作同赋予类型的操作链接在一起了，在一整段JS代码执行完毕之后才会对DOM进行操作，而非数据改变就立即进行操作，资料显示涉及到回流 。

该现象的解决办法是，使赋予类名的操作进行异步处理，将该行的代码放置在下一轮的执行栈中，这样，当类名被清除后，紧接着赋予类名的操作不会被触发，而是会更新DOM使页面进行重新渲染，之后才是执行赋予类名的操作，大致上是这样的。

以上内容参考https://blog.csdn.net/z1324402468/article/details/82555884进行理解

此外，在我正式使用时还有几个点要注意的

       在定时器中操作this需要外部先保存一下当前环境的this指向，因为在箭头函数中是不存在this的。

还有一点和我的项目需求有关，需要先执行完动画再进行页面的跳转。

在伊始测试的时候总是会先进行跳转，我尝试将触发动画的执行函数通过async await的方式设置成同步，依然是先进行跳转，梳理一下代码，在为结构赋予类名时使用了定时器，对于定时器来讲属于异步语句，将会在本轮JS代码执行完毕后才会被执行。我的解决方案就是为页面跳转也进行异步处理，且动画的执行时长是1s，那么将页面跳转的时间设置为大于1s即可。

存在问题；经过以上的处理，虽然算是表面上解决了需求，但是仍然存在一个问题，那就是在页面被返回时，也会触发动画。该问题以被解决，我尝试将清除类名放在异步添加类名的后面，我真傻，异步操作是不影响后续代码执行的，所以放在异步前后都是无所谓的事情，我将清除工作放在跳转之前，因为跳转时被异步处理的，所以它必然是在赋予类名之后，动画执行之后进行解析，所以这时候进行清除类名是可以正确的执行。

目前我只做到了第一种，第二种只能让动画运行一次，所以关于第二次的暂时先放着，等以后解决了再记录。