Question

我正在开展一个项目，我需要将div设置为指定高度的动画，然后动画将其height设置为auto。奇怪的是，当div的高度设置为auto时，高度将设置为高度动画，然后跳转到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)，但您将无法获得所需的效果。这是一个棘手的主题，许多人都试图处理它并破解它！

webkit中的CSS动画在auto之前变为零

1 个答案: