关于6-3轮播图特效中 transition 的更新问题
来源：6-3 编写跑马灯轮播图特效
LyaN98
2021-11-01 21:14:52
在6-3视频15分15秒左右，老师提到过这么一个情况
setTimeout(function () {
ul.style.transition = "none";
carouselIndex = 0;
ul.style.left = 0;
ul.style.transition = "";
});当代码执行到 ul.style.left = 0 的时候，来不及执行，就被下一行的transition影响到了。
请问老师，为什么会出现来不及执行的情况呢？在执行 left 这段代码的时候，过渡效果不是被去除掉了吗，这时的 left 为什么不会马上作用在样式上让元素归0？而是被接下来还没运行的代码影响到了？
然后在网上找了一些其他的解决办法，可以通过添加 getComputedStyle(ul).transition 这段代码来解决。
setTimeout(function () {
ul.style.transition = "none";
carouselIndex = 0;
ul.style.left = 0;
ul.getComputedStyle(ul).transition;
ul.style.transition = "";
});但是这行代码我查了一下，是说来获取CSS样式用的，但在这里为什么获取过后就不会受到最后一行的transition影响呢？麻烦老师帮我解答一下，谢谢老师
写回答
1回答
-
好帮手慕然然
2021-11-02
同学你好，解答如下：
1、这是浏览器解析机制的原因，如果连续设置同一个style属性的话，在解析过程中，浏览器会自动取最后一个值，所以这段代码最终还是有过渡效果。
2、getComputedStyle这个方法会让浏览器发生重绘，当执行到ul.getComputedStyle(ul).transition;这句代码时会强制更新DOM，此时DOM元素会在无过渡的情况下移动到left:0的位置。因此不会受到最后一行transition的影响。
祝学习愉快！
0
相似问题