首次运行后Css动画未运行

Question

我有2个div用于扩展内容，1个用于标题文本。 我通过更改父元素上的类（通过javascript）然后将height/width设置为0并将visibility设置为hidden来扩展它们

我试图弄清楚为什么css动画在第一次扩展后停止运行以及如何使时间保持一致。 我正在使用max-height作为动画，因为我不知道目标高度。

JSFiddle

[data-element] {
    transition: max-height 4s ease;
}
.collapsed [data-element="collapsed"] {
    max-height: 900px;
    height: auto;
    width: auto;
}

Answer 1

我在这里工作了一些东西，但是带有最大高度的动画会导致延迟，这使得这不是一个理想的解决方案。

删除其中一些帮助

height:auto; 

http://jsfiddle.net/XXRWx/1/