javascript - 过渡CSS属性使内容看到两次

Question

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

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

过渡:高度0.5s； 过渡:高度 0.5s，padding-top 0.5s，padding-bottom 0.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 的动画。但是，您似乎没有定义要设置动画的内容，或者至少没有定义要设置动画的所有内容。

您可以替换:

过渡:高度 0.5s，padding-top 0.5s，padding-bottom 0.5s；

与

过渡:行高 0.5s，边距底部 0.5s，颜色 0.5s，字体大小 0.5s，背景 0.5s，高度 0.5s，内边距 0.5s；

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

过渡:全部 .5s；

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

Updated fiddle link