手风琴内容的动画

Question

我创建了一个手风琴并尝试在用户尝试单击手风琴标题时添加过渡效果。

我在手风琴容器中添加了height: auto 和transitiion，但这种努力在这里似乎毫无用处。

var texts = document.getElementsByClassName('text');
[].slice.call(texts).forEach(function (text) {
    text.onclick = function () {
        text.parentElement.classList.toggle('animate');
    }
});

Here is the Fiddle

PS：每个内容的高度不同，动画应该在打开和关闭内容时发生。

编辑：

我尝试了可能的重复问题解决方案，这不是动画完美，

http://jsfiddle.net/9vuor3oo/5/

动画仅在打开手风琴时起作用，而不是关闭它。而且最后一个手风琴在打开时甚至没有动画。

Answer 1

我更新了您的示例：http://jsfiddle.net/9vuor3oo/6/。您需要将max-hight 添加到.parent .child，然后添加过渡。