javascript - webkit 中的 CSS 动画在自动之前变为零

Question

我正在处理一个元素，我需要将一个 div 设置为指定高度的动画，然后将其 height 设置为 auto。奇怪的是，当div的高度设置为auto时，高度动画为height，然后跳转到auto。我在 Safari 和 Chrome 中观察到了这种行为。

这是我的测试代码:

HTML:

<div id="a" style="height:0px;"><div style="height:100px;"></div></div>

CSS:

#a{
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    width:100px;
    background:blue;
}

JavaScript:

window.setTimeout(function(){
    document.getElementById("a").style.height = "100px";
}, 10);

window.setTimeout(function(){
    //The auto height will be 100px. The div will already be at this... But it animates to 0px and then goes to auto. Strange right!?!?
    document.getElementById("a").style.height = "auto";
}, 2000);

FIDDLE

我该如何解决这个问题？谢谢。 如果您投反对票，请告诉我原因，以便我改进这个问题。

Answer 1

不幸的是，此时您无法使用 CSS3 动画将动画设置为自动。另一种方法是尝试为 transform 属性设置动画并从 transform: scale(0) 到 transform: scale(1)，但是你不会有预期的效果。这是一个棘手的主题，很多人都试图处理它并绕过它!