CSS3不执⾏Transition过渡动画
如果元素设置了transition,那么当 JavaScript 改变相应属性值的时候,就会触发该过渡动画。
有时候,我们想直接设置该值,⽽不触发过渡动画,最直观的想法就是先设置 transition-duration 为0,然后设置该值,最后恢复transition 的值。但是这个⽅法是⾏不通的,因为JavaScript是单线程的,它采⽤消息机制,当我们给元素赋予某个样式的时候,它并没有⽴即执⾏,⽽是继续处理当前的消息队列,直到进⼊到某个专门处理CSS的阶段(RecalculateStyle)。**这点和Node.js的事件机制很像。**前⾯说到JavaScript是单线程,因此采⽤上⾯⽅法的结果是“对同⼀个属性赋值,后⾯的覆盖前⾯的”,因此后续触发RecalculateStyle的时候,依然会触发过渡动画。
因此,解决该问题的思路就有两种
修改消息的先后顺序。
通过⼈为的设置⼀个延迟(setTimeout、requestAnimationFrame),使transition的设置在RecalculateStyle之后被处理⼿动触发 RecalculateStyle 使得修改⽣效。
注意到有个 getComputedStyle ⽅法⽤来获取计算后的样式(以前我常⽤在获取伪元素的样式上),既然要计算样式,那么必定会触发 RecalculateStyle,这样之前的CSS就被处理了。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
body {
display: flex;
}
div {
width: 15em;
js控制css3动画触发height: 10em;
border: 1px solid black;
margin: 1em;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script>
//js中是没有node.js的Tick和window.setImmediate这两个⽅法的
const [div1, div2, div3, div4, div5] = ElementsByTagName("div");
div1.style.backgroundColor = "red";
ansition = "background-color 5s";
div2.style.backgroundColor = "red";
window.setTimeout(()=>{
ansition = "background-color 5s";
}, 100);
div3.style.backgroundColor = "red";
const start = new Date().getTime();
const end = new Date().getTime();
const cost = end-start;
console.log(cost); //我这⾥是只花了18ms
ansition = "background-color 5s";
});
lor = "yellow";
div4.style.backgroundColor = "red";
div4.style.marginLeft = "4em";
//获取的并不⼀定要是transition中设置的属性,通常随便获取⼀个属性都会导致RecalculateStyle(animation、transition等少部分属性不在其中) getComputedStyle(div4).length;
//这段⼀定要放在获取只读的计算属性之后
ansition = "all 5s";
}
</script>
</head>
<body>
<div>原始</div><div>setTimeout</div><div>requestAnimationFrame</div><div>getComputedStyle</div>
</body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论