标签：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即可。

 

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

 

 

 

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

标签：Uniapp,异步,动画,跳转,animation,注意事项,执行,类名,页面
来源： https://www.cnblogs.com/OtherChannel/p/16439199.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。