javascript - css中过渡动画问题
本文介绍了javascript - css中过渡动画问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>style-animate</title>
</head>
<body>
<style>
.item{
display: none;
position: absolute;
top: 50%;
width: 100px;
height: 100px;
background-color: red;
left: 10px;
transition: all 300ms ease;
}
</style>
<a href="javascript:;" id="button">显示</a>
<div class="item"></div>
<script>
var item = document.querySelector(".item");
document.getElementById("button").addEventListener("click",function(){
item.style.display="block";
item.offsetHeight; //为什么在这里增加这个调用,就可以显示动画?
item.style.left="100px";
});
</script>
</body>
</html>
问题描述
正常display:none的元素变为display:block,是不产生任何动画过渡的,但是为什么访问元素的offsetHeight
属性后却可以产生动画?原理是什么?
解决方案
谢邀并强答:
浏览器的DOM操作或许不是一个API一个API接连执行的,而是会将一系列相似的API列队以后一次执行,已达到一定效率并减少开销,单次DOM操作的开销特别大。
而调用item.offsetHeight属性打断了元素的样式修改,原本是display和left一起提交的,被打断后display先提交了,然后才提交的left;
我测试过,把 item.offsetHeight;
换成 window.getComputedStyle(item, null)["display"];
也会产生动画。大概是不能在同时多个提交样式的语句中间插入样式读取的语句吧。
当然,以上都是猜想,真实原理我并不知道。已关注话题,等待优解。
刚刚有测试了如下代码:
item.style.display="block";
item.style.top="20px";
item.offsetHeight; //为什么在这里增加这个调用,就可以显示动画?
//window.getComputedStyle(item, null)["display"];
//item.style.top="20px";
item.style.left="100px";
当 item.style.top="20px";
分别置于 item.offsetHeight;
前后时动画效果是不一样的。置于前是,只有向右动画,置于后才有斜向右上的动画。正好说明了, item.offsetHeight;
确实对样式修改的DOM操作进行了分段。原本只需要进行一次DOM操作分成了两次。先渲染了display和top,然后才渲染left,所以可以看到left的动画。
这篇关于javascript - css中过渡动画问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文