JQuery Toggle 动画干扰 CSS 高度过渡答案

【问题标题】：JQuery Toggle animation interfering with CSS height transitionJQuery Toggle 动画干扰 CSS 高度过渡
【发布时间】：2017-01-25 17:17:14
【问题描述】：

我有一个 JQuery 函数可以用 (toggle(200)) 切换 Div，所以有一个小的滑动动画。

但是我有另一个函数可以向这个 div 添加一个类，它通过 0.3 秒的过渡来改变 div 的高度。

#navbar {
    height: 270px;
    transition: height 0.3s ease-out;
}

#navbar.change-size {
    height: 430px !important;
}

我的问题是过渡不仅适用于高度（这是预期目的），而且还适用于当 div 滑入时切换的第一个 JQuery 函数。

我的问题是如何设置我的 css 以便高度过渡效果仅适用于 .change-size 高度？

PS：我没有添加我的 JQuery 切换代码，因为我认为它不相关。 JQuery 滑动动画可能是在调整 div 的高度/宽度以创建滑动效果，因此受到我设置的过渡的影响。

如果我不清楚，请告诉我。谢谢！

【问题讨论】：

那么为什么不将过渡添加到.change-size 类呢？您将使用 setTimeout 或动画完成后删除该类（不知道您何时添加/删除该类）？
在.change-size 上进行转换的问题是，当类被删除时，在返回的路上没有动画:( 我在想一种替代方法是创建一个动画，它只是更改元素的大小，但我不知道这是否可能。这种方式不写transition: height 0.3s 我会写它transition: animation-name 0.3s 这样它就不会干扰JQuery 滑动动画。
你为什么要问一个明显需要minimal reproducible example的问题？您正在为元素制作动画并提及另一个动画，但认为它无关紧要？所以只是让你很不清楚。
@eloism 如果您以正确的方式删除该类，它将在返回的途中显示动画。我已经提到过。

标签： javascript jquery css

【解决方案1】：

希望对你有帮助

little fiddle

<!DOCTYPE html>
<html>
    <head>
        <style>
        #navbar {
            height: 270px;
            -ms-transition: all .3s ease-out; /*IE*/
            -moz-transition: all .3s ease-out; /*firefox*/
            -webkit-transition: all .3s ease-out;/*safari and chrome*/
            -o-transition: all .3s ease-out; /*opera*/
            background-color: #999;
        }

        #navbar.change-size {
            height: 430px;
        }
        </style>

        <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>

    <body>
        <div id="navbar">
            Hello
        </div>

        <button id="toggle">.change-size</button>
        <script>
        $(function(){
            $("#toggle").on("click", function(){
                $("#navbar").addClass("change-size");
            })
        })
        </script>
    </body>
</html>

【讨论】：