从价值到零的最大高度动画

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

问题是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>

​