css3动画设置无效

css3动画设置无效

原因1: 添加动画元素是行内元素**

解决: 设置为行内块级元素

原因2: diff算法的原因

这个遇到的情况比较少,但是我在开发中确实遇到了,讲讲经历吧

• 在做年度报告的时候,需要加一个动画效果,让文字逐行显示
  
• 然后我就获取到当前页面的每一行的元素
• 给元素加上动画属性样式
• 第一个页面没有问题,每一行都是逐行显示的
• 到了第二页,就没有逐行显示的效果了
• 我以为是没获取元素,或者js没有生效
• 调试之后发现都生效了,并且在控制台上查看元素的属性,已经加上了动画属性
  
• 这就很奇怪,然后再切换页面的时候,我发现那个元素感觉没有重新渲染,只是改变了其中的值
• 我就想到了diif算法,然后我大胆的验证了下
• 给元素加上了不同的key值,果然就好了
• 为什么第二个页面没有动画效果
• 因为dom元素并没有更新,更新的是里面的值
• 所以动画就不生效,因为他认为之前元素已经执行完毕了这个动画,就不会在执行了
• 理解原理还是有必要的,不然很多问题的解决要走很多弯路

关于简单理解diff算法的一篇文章 https://blog.csdn.net/weixin_42369612/article/details/120705876