javascript - Accordion 内容的动画

Question

我创建了一个 Accordion 并尝试在用户尝试点击 Accordion 标题时添加过渡效果。

我添加了 height: auto 和 transitiion 到 accordion 容器，但是这里的努力似乎没有用。

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/

动画仅在 Accordion 打开但不关闭时起作用。最后一个 Accordion 在打开时甚至没有动画。

Answer 1

我更新了您的样本:http://jsfiddle.net/9vuor3oo/6/ .您需要将 max-height 添加到 .parent .child 中，然后向其添加过渡。