html - CSS 过渡堆叠？

Question

我正在使用 CSS 来滑动菜单。使用 JS 我只添加一个类来触发 CSS 动画。在桌面模式下，菜单存在于带有列表项的 4 列中。在移动模式下，菜单将折叠，只保留标题。标题可点击以打开菜单。

我的菜单运行正常，但是向下滑动和向上滑动的动画不一样。向上滑动也较慢/稍后开始。我不明白为什么会这样，我想要向下滑动和向上滑动相同的效果。

查看我的 JSfiddle:JSfiddle

HTML

<div class="site-footer">
    <div class="row">
        <div class="col-25p">
            <span class="footer-heading">Heading 1</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 2</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 3</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 4</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

SCSS

.site-footer {
font-size: 1.3rem;

.footer-heading {
    display: block;
    color: black;
    font-weight: bold;
    font-size: 18px;
    padding-top: 4px;

    &:hover{
        cursor: pointer;

        @media (min-width: 768px){
            cursor: default;
        }
    }

    &::after {
        font-family: "FontAwesome";
        float: right;
        content: "\f078";
        transition-property: all;
        transition-duration: 0.5s;

        @media (min-width: 768px){
            content: "";
        }
    }

    &.open{
        &::after{
            transform: rotate(180deg);
        }

        & + div{
            max-height:500px;
            //transition:all 500ms ease;
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);
        }
    }


    & + div {
        overflow-y: hidden;
        max-height: 0;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

        @media (min-width: 768px){
            max-height: 500px;
        }
    }

}

ul {
    list-style: none;
    padding-left: 0px;

    li {
        padding-top: 4px;
        padding-bottom: 4px;

        a {
            color: black;
            text-decoration: none;

            &:hover {
                text-decoration: underline;

            }
        }
    }
}
}


.col-25p{
  @media (min-width: 768px){
    float:left;
    width: 25%;
  }
}

JavaScript

$('.site-footer .footer-heading').click(function(){
        $(this).toggleClass('open');
    });

Answer 1

您正在为 max-height 属性设置动画。它从 0px 到 500px 并返回。然而，要设置动画的 div 小于 500px。

这就是关闭动画存在延迟的原因。

我通常解决这个问题的方法是使用 JavaScript 在元素上设置 max-height 属性。