Question

我有一个JQuery函数来切换Div（toggle（200））所以有一个小的滑动动画。

但是我有另一个函数会向这个div添加一个类，它会以0.3s的转换来改变div的高度。

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

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

我的问题是转换不仅仅适用于高度（这是预期目的），但它也适用于第一个JQuery函数在div滑入时切换。

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

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

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

Answer 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>

JQuery切换干扰CSS高度转换的动画

1 个答案: