使用javascript / jQuery添加類時，為什么css過渡不起作用？

Question

我有一個消息框，我想在點擊時向下滑動。 我通過Angular添加一個css類（在我的例子中使用jQuery）來實現這一點。 但是我的CSS轉換沒有生效。

我在做什么明顯的錯誤？

這是我的小提琴： http ： //jsfiddle.net/mBKXn/

和我的代碼：

// jQuery
$('.test').on('click',function(){
  $('#msgContainer').toggleClass('msgShow');
});

// HTML
<div class="container">
    <div id="msgContainer" class="msg">
        <p>Message here</p>
        <p>T2</p>
        <p>T4</p>
    </div>
    Test text
</div>

<button class="test">Click</button>

// CSS
.container{
    position: relative;
    height: 200px;
    width: 400px;
    border: solid 1px #222;
}

.msg{
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: height 0.8s linear;
    -moz-transition: height 0.8s linear;
    -o-transition: height 0.8s linear;
    -ms-transition: height 0.8s linear;
    transition: height 0.8s linear;    
}

.msgShow{
    height: auto;
}

Answer 1

要將高度從0設置為自動，您必須使用max-height ：

.msg{
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    max-height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: max-height 0.8s linear;
    -moz-transition: max-height 0.8s linear;
    -o-transition: max-height 0.8s linear;
    -ms-transition: max-height 0.8s linear;
    transition: max-height 0.8s linear;    
}

.msgShow{
    max-height: 1000px;
}

似乎工作： http ： //jsfiddle.net/mBKXn/3/

另外看看這個問題 。

Answer 2

你需要設定一個確定的高度。 高度：自動無效，因為這是默認高度值。

請參閱此處有關高度屬性的規范： http ： //www.w3.org/TR/CSS2/visudet.html#the-height-property

http://jsfiddle.net/mBKXn/7/

.msgShow{
    height: 100%;
}

Answer 3

另一種（較舊的IE兼容）方法是通過slideToggle。

更新了小提琴，可以工作 ， 另一個小提琴 ，我刪除了你的一些過渡css，它使動畫在我看來更順暢。

您的代碼需要稍作修改：

$('.test').on('click',function(){
  $('#msgContainer').slideToggle('slow');
});

而你的班級需要稍作修改：

.msg{
    display:none;
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: auto;
    width: 100%;
    overflow: hidden;
}