从值过渡到无的最大高度动画

Question

我玩了CSS-transitions，遇到了一些奇怪的事情，从值中添加了max-height的过渡(例如14px) 到none。

根本没有动画，隐藏的元素立即出现和消失。

我可以看到一个问题，因为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

如果你使用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>

Answer 2

问题是 CSS 属性max-height: none。

我通过使用JS解决方案并保存元素的scrollHeight来管理它。这是元素的实际高度，不考虑 CSS 属性max-height。

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>