Многострочная анимация разворачивания контейнера

Question

Каким образом следует управлять многострочной анимацией контейнера (например, блоком контента или предупреждением) анимации?

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>