Question

在JavaScript中将元素的高度设置为0，然后立即将其更改为特定值时，元素的CSS转换不起作用。

但是，通过放置代码来增加setTimeout()内的高度，即使延迟为0，转换仍然有效，如下面的代码段所示：

// Doesn't work:
document.getElementById("one").setAttribute("style", "height: 0px");
document.getElementById("one").setAttribute("style", "height: 200px");

// Works:
document.getElementById("two").setAttribute("style", "height: 0px");
setTimeout(function() {
	document.getElementById("two").setAttribute("style", "height: 200px");
}, 0);

div {
  display: inline-block;
  width: 200px;
  background-color: black;
  transition: height 1s;
}

#two {
  background-color: blue;
}

<div id="one">
</div>
<div id="two">
</div>

此行为在所有主流浏览器中都是一致的。这个问题是，有时，似乎存在某种延迟，这使得解决方法也不具有动画效果。所以这似乎不是一个干净的解决方案。

导致过渡取消的原因是什么？如何干净利落地解决这个过程？

Answer 1

最有可能的浏览器会优化转换，并且会合并少于16毫秒的更改（这会使您的刷新率达到每秒约60帧）

所以解决方案是简单地换行嵌套RAF调用的样式更改（告诉浏览器在准备就绪时的动画，而不是在任意超时之后）

window.requestAnimationFrame(function(){
document.getElementById("two").setAttribute("style", "height: 0px");
 window.requestAnimationFrame(function(){
    document.getElementById("two").setAttribute("style", "height:  200px");
  });
});

参考：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 2

尝试将其添加到window.onload事件

window.addEventListener("load", init, false);

function init() {
    document.getElementById("one").style.height = "200px";
}

您还必须将CSS中的#one高度设置为0

#one {
   height:0px;
}

Answer 3

//cache the object in a variable
var one = document.getElementById("one");

//do you really need to overwrite all stlyles defined on this object?
//if not, prefer style-property over attribute
//set animation-start
one.style.height = 0;

//force the browser to apply styles
getComputedStyles(one);

//apply the animation-target
one.style.height = "200px";

你不需要任何超时，但要注意，这会迫使浏览器进入渲染周期（这是人们在JS中可以做的最昂贵的事情之一）。

所以不要在循环中（或在多个节点上，一个接一个地使用它）。但是做两个循环，首先设置所有的起始值，强制浏览器进入渲染周期，然后应用所有目标值。

通过JavaScript立即更改大小时，CSS转换不会生成动画

3 个答案: