CSS3 不执行 Transition 过渡动画
2023-09-11 14:22:55 时间
如果元素设置了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>
相关文章
- CSS3 transition实现超酷图片墙动画效果
- Flutter透明度渐变动画Opacity实现透明度渐变动画效果
- flutter RotationTransition实现旋转动画
- Android 帧动画 xml 方式实现
- 电梯动画演示
- JavaScript - PC端页面纯 JS 实现返回顶部(带过渡动画)
- CSS - 呼吸灯效果动画(淡隐淡出效果)
- 图解css3:核心技术与案例实战. 1.4 CSS3的现状及未来
- 图解css3:核心技术与案例实战. 3.5 CSS3盒子阴影属性
- css3实现颤动的动画
- CSS3彩色进度条加载动画 带进度百分比
- 《JavaScript高效图形编程(修订版)》——6.8 使用画布创建动画
- android 围绕中心旋转动画
- 详解Android动画之Frame Animation
- 测试css3的动画效果在display:none的时候不耗费性能
- SwiftUI 动画之如何给Text设置淡入淡出效果 教程含源码opacity
- 一文带你复习CSS3关于动画的全部知识
- animation-fill-mode控制CSS3动画结束状态
- Qt之动画框架
- CSS3之边框样式(动画过渡)
- 给不定高度/宽度元素添加CSS3 transition动画
- CSS3中的动画效果-------Day72
- 【历史上的今天】3 月 29 日:“机器人三定律”问世;电脑动画首次获得奥斯卡;Caldera Linux 沉浮史
- iOS- 点赞动画效果
- 利用html5制作一个时钟动画