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

Question

我尝试了 CSS-transitions 并遇到了一些奇怪的事情，从一个值(例如 14px)为 max-height 添加了一个过渡>) 到 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>