CSS3 不执行 Transition 过渡动画

最新推荐文章于 2021-02-24 15:25:49 发布

福州司马懿

最新推荐文章于 2021-02-24 15:25:49 发布

阅读量8.8k

点赞数 2

分类专栏： CSS3 文章标签： transition recalculateStyle

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/84107072

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

如果元素设置了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;
	height: 10em;
	border: 1px solid black;
	margin: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
<script>
//js中是没有node.js的process.nextTick和window.setImmediate这两个方法的
window.onload = ()=> {
	const [div1, div2, div3, div4, div5] = document.getElementsByTagName("div");
	
	div1.style.backgroundColor = "red";
	div1.style.transition = "background-color 5s";
	
	div2.style.backgroundColor = "red";
	window.setTimeout(()=>{
		div2.style.transition = "background-color 5s";
	}, 100);
	
	div3.style.backgroundColor = "red";
	
	const start = new Date().getTime();
	window.requestAnimationFrame(()=>{
		const end = new Date().getTime();
		const cost = end-start;
		console.log(cost); //我这里是只花了18ms
		div3.style.transition = "background-color 5s";
	});

	div4.style.color = "yellow";
	div4.style.backgroundColor = "red";
	div4.style.marginLeft = "4em";
	//获取的并不一定要是transition中设置的属性，通常随便获取一个属性都会导致RecalculateStyle（animation、transition等少部分属性不在其中）
	getComputedStyle(div4).length;
	//这段一定要放在获取只读的计算属性之后
	div4.style.transition = "all 5s";

}
</script>
</head>
<body>
<div>原始</div><div>setTimeout</div><div>requestAnimationFrame</div><div>getComputedStyle</div>
</body>
</html>

福州司马懿

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS3 不执行 Transition 过渡动画

如果元素设置了transition，那么当 JavaScript 改变相应属性值的时候，就会触发该过渡动画。有时候，我们想直接设置该值，而不触发过渡动画，最直观的想法就是先设置 transition-duration 为0，然后设置该值，最后恢复 transition 的值。但是这个方法是行不通的，因为JavaScript是单线程的，它采用消息机制，当我们给元素赋予某个样式的时候，它并没有立即执...
复制链接

扫一扫