Chrome的DevTools调试动画偶尔失效的问题排查
最后更新于
最后更新于
大家好我刚才在准备demo的时候发现
chrome的这个Animations
有时候用它来调慢动画不好使
比如说我现在这个切换它就有
一个动画效果吗
然后他这块会抖一下
我就想放慢他就不好使
比如说我们现在试一下啊
10%
大家看
跟没有动画了一样
然后就很好奇这是为什么
后来我发现啊原因是这样的
我们先说 Animations
它只是针对 css 的动画进行放慢
那也就是说
只要我们页面上
写了这个 transition 的过渡
（比如说现在这个是...
...所有的属性都用0.3秒来过渡）
只要写了这种transition过度
他才会有动画效果
然后呢他才能谈得上放慢速度
那问题的关键就在于
这个样式
什么时候会被应用到这个元素上
只要这个元素上有这个样式
那他就有动画效果
他就可以放慢
说到这呢就好理解了
因为我们知道
transition的这个组件会替我们在
切换里面元素的那个短时间里面
去管理里面的class样式
就说他会替我们
切换的时候呢把这个样式加上哎
等切换完了他再把样式去掉
所以我们再回到这个上面
当他去掉这个样式的时候说明
整个这个页面现在
没有动画效果了
所以就谈不上放慢了
所以呢解决这个问题有两个方法
（那这两个方法肯定都是调试的时候用哈）
第一个就是这样比较粗暴
我们在这加一个 style
然后呢
我们让他永远都有这个过渡效果
好我们来试一下
然后呢放慢
大家看，慢了、暂停
他就暂停了
继续
大家看
那第二个方法呢就是
我们把这个再去掉
第二个方法呢
就是我们要想办法不要让组件把这个
样式
删掉我们可以在这加一个
v-on:enter
然后呢然后调一个方法
我下边写好了就是这个enter方法
然后enter方法里什么都不写
大家看这有个done方法（回调）
只要我们调用done方法
那他就会把那个样式删掉
我们不调呢他就不删
我们再试一下哈
百分之百
放慢
大家看！暂停可以了
继续
包括他动画执行完了我们来看一下
他这个样式还在
test-enter-active 然后 test-enter-to
还可以试一下把它加成
done() 但是呢我们放到 setTimeout 里边
嗯比如我们用3秒吧
好我们再来调一下
我们切换到这
大家看现在还有这个样式
哎没了
说明过三秒他就被移除了
下一期我们继续来说这个抖动的问题