多行容器展開動畫

Question

應該如何管理CSS多行容器（例如內容塊或警報）展開動畫？

http://plnkr.co/edit/Qq5fzeb3GBengviVNimC?p=preview

.alert { 
    background: turquoise; 
    color: white; 
    padding: 10px; 
    overflow: hidden; 

    opacity: 0; 
    max-height: 0; 
} 

body:hover .alert { 
    display: block !important; 
    opacity: 1; 
    -webkit-transition: 2s; 
    -moz-transition: 2s; 
    -ms-transition: 2s; 
    transition: 2s; 
    max-height: 100px; 
} 

這裏的問題是「多」，你可以看到，該塊的高度是不是一個固定值。

<div class="alert">Alert!<br>Alert!<br>Alert!</div> 

雖然max-height: 100px是接近真正的塊高度，它工作正常。如果max-height較小，則動畫最終會變得不穩定，並且max-height: 9999px會使轉換過快。

這樣做可以不計算JS中的確切高度嗎？

Answer 1

計算高度jQuery中進行實在的，我做了以下解決你的問題：

$("#out").html("Block height: " + $("#alert").height()); 
 
//solely for demonstration, you can delete this line 
 

 
$("#alert").css('height','0px'); 
 

 
$('#alert').mouseover(function(){ 
 
    $("#alert").css('height', '58px'); 
 
}); 
 
$('#alert').mouseout(function(){ 
 
    $("#alert").css('height', '0px'); 
 
});

#alert { 
 
    background: turquoise; 
 
    color: white; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    //max-height: 0; this causes .height() to always display '0' so delete this here, and set this via jQuery 
 

 
} 
 

 
body:hover #alert { 
 
\t display: block !important; 
 
\t opacity: 1; 
 
    -webkit-transition: 2s; 
 
    -moz-transition: 2s; 
 
    -ms-transition: 2s; 
 
    transition: 2s; 
 
// max-height: 100px !important; set this via jQuery 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Hello!</p> 
 
<div id="alert">Alert!<br>Alert!<br>Alert!</div> 
 
<p>Hello again!</p> 
 

 
<span id="out"></span>