JQuery Toggle動畫干擾CSS高度轉換

Question

我有一個JQuery函數用（toggle（200））切換Div，所以有一個小的滑動動畫。

但是，我還有另一個函數，它將向該div添加一個類，該類通過0.3s的轉換來更改div的高度。

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

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

我的問題是過渡不僅適用於高度（這是預期的目的），而且還適用於div滑入時切換的第一個JQuery函數。

我的問題是如何設置CSS，以便高度轉換效果僅適用於.change-size height？

PS：我沒有添加我的JQuery切換代碼，因為我認為這無關緊要。 JQuery滑動動畫可能正在調整div的高度/寬度以創建滑動效果，因此受我設置的過渡的影響。

如果不清楚，請告訴我。 謝謝！

Answer 1

希望這可以幫助

小提琴

<!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 Toggle動畫干擾CSS高度轉換

問題描述

1 個解決方案

解決方案1
0 2016-09-17 16:44:35

JQuery Toggle動畫干擾CSS高度轉換

問題描述

1 個解決方案

解決方案1 0 2016-09-17 16:44:35

解決方案1
0 2016-09-17 16:44:35