與價值沒有

Question

過渡最大高度動畫我打得四處CSS-transitions並遇到了一些奇怪的事情來了，從價值（例如14px）以none增加對max-height的過渡。

根本沒有動畫，隱藏的元素立即出現和消失。

我可以看到一個問題，因爲none沒有高度，所以很難將差異計算爲動畫。將none更改爲實際值（例如120px）按預期工作。

有沒有辦法讓這個例子工作，而不改變HTML結構？

$("div").click(function(){ 
 
    $(this).toggleClass("unfold"); 
 
})

div { 
 
    max-height: 14px; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    
 
    -moz-transition: 1s; 
 
    -ms-transition: 1s; 
 
    -o-transition: 1s; 
 
    -webkit-transition: 1s; 
 
    transition: 1s; 
 
} 
 

 
div.unfold { 
 
    max-height:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
First-line<br /> 
 
Second<br /> 
 
Third<br /> 
 
Fourth<br /> 
 
More<br />More<br />More<br />More<br />More<br />More<br />More<br />More<br /> 
 
</div>

Answer 1

問題是max-height: none CSS屬性。

我有點管理這個通過使用JS解決方案，並保存元素的scrollHeight。這是元素的實際高度，不考慮max-height CSS屬性。

var INITIAL_MAX_HEIGHT = 14; 
 

 
$("div").each(function() { 
 
    var $element = $(this); 
 
    var scrollHeight = $element.prop("scrollHeight"); 
 
    $element.css({"max-height": INITIAL_MAX_HEIGHT}); 
 

 
    $element.click(function(){ 
 
    var height = $element.height(); 
 
    if (height <= INITIAL_MAX_HEIGHT) { 
 
     $element.animate({"max-height": scrollHeight}, 1000); 
 
    } else { 
 
     $element.animate({"max-height": INITIAL_MAX_HEIGHT}, 1000); 
 
    } 
 
    }); 
 
});

div { 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
First-line<br /> 
 
Second<br /> 
 
Third<br /> 
 
Fourth<br /> 
 
More<br />More<br />More<br />More<br />More<br />More<br />More<br />More<br /> 
 
</div>

Answer 2

的，如果你正在使用jQuery它有一個叫了slideDown不錯的方法，可以如下做好動漫動畫的高度。

$("button").click(function(){ 
 
    $('div').slideToggle(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button>Click me to animate</button> 
 
<div style="display:none"> 
 
First-line<br /> 
 
Second<br /> 
 
Third<br /> 
 
Fourth<br /> 
 
</div>