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，然后添加转换。

手风琴内容动画

1 个答案: