<!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属性后却可以产生动画？原理是什么？
添加回答
举报
0/150
提交
取消