javascript - transition css 属性使内容显示两次

Question

- 当我单击第 2 部分时，第 2 部分内容打开。

• 当我再次点击第 2 部分的内容时，它会关闭，但当它关闭时，我会看到两次文本。
• 当第 2 部分正文即将关闭时，我看到第 2 部分的内容为黑色，但绿色背景消失了
• 我调试了代码，我认为它是由于过渡 css 属性而发生的，我无法删除它，因为我需要看到顺利结束。

过渡:高度 .5s； 过渡:高度 .5s，填充顶部 .5s，填充底部 .5s；

• 你能告诉我如何解决吗？
• 在 fiddle 中提供我的代码。

.accordion-section {
    border-bottom: solid 1px #000;
}

.accordion-section > h3 {
    padding: 6px;
    font-size: 16px;
    background-color: #CCC;
    margin: 0;
}


.accordion-section > .body {
    height: 0;
    padding: 0 10px;
    overflow-y: hidden;
    transition: height .5s;
    transition: height .5s, padding-top .5s, padding-bottom .5s;
}

Answer 1

根据您提供的 fiddle ，您似乎正在对您提到的部分内容的隐藏和显示执行基于 css 的动画。但是，您似乎没有定义要制作动画的东西，或者至少不是所有想要制作动画的东西。

你可以替换:

transition: height .5s, padding-top .5s, padding-bottom .5s;

与

transition: line-height .5s, margin-bottom .5s, color .5s, font-size .5s, background .5s, height .5s, padding .5s;

但是，由于您似乎正在为该部分及其内容的所有当前样式设置动画，因此您可以简单地使用:

transition: all .5s;

这是应用于您的 fiddle 的更改:

Updated fiddle link