具有从值过渡到无的最大高度动画答案

【问题标题】：Max-height animation with transition from value to none具有从值过渡到无的最大高度动画
【发布时间】：2017-03-20 20:50:40
【问题描述】：

我玩弄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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：

仍然没有动画。隐藏的部分只是出现或消失。
我认为问题是因为您正在尝试动画溢出属性，它不能被动画只是尝试使显示无和高度动画更新答案给我一点时间。 stackoverflow.com/questions/27904886/…
溢出属性不能动画，所以你需要动画高度并显示这两个属性有点复杂，jquery提供了方便的方法来使用高度幻灯片检查更新的答案。
完全隐藏内容不是一种选择，因为我希望第一行可见。
然后创建 2 个 html 元素，第一个元素将保留第一行，其余内容将在第二个 div 中，并在单击第一个 div 时为第二个 div 设置动画，如上。 :)

【解决方案2】：

问题在于max-height: none CSS 属性。

我通过使用 JS 解决方案并保存元素的 scrollHeight 来解决这个问题。这是元素的实际高度，不考虑max-height CSS-property。

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>

【讨论】：