计算样式上的 CSS 过渡答案

【问题标题】：CSS Transitions On Computed Styles计算样式上的 CSS 过渡
【发布时间】：2015-07-27 16:59:22
【问题描述】：

是否可以根据计算的样式转换 css，而不是明确设置的样式？

示例

我有以下 CSS/HTML

.grow {
  transition: height 1s ease-in-out;
}
.hidden {
  display: none;
}

<ul>
  <li>
    <div class="grow">
      <ul class="hidden">...</ul>
    </div>
  </li>
</ul>

然后，如果我使用 javascript 删除隐藏类，则 div 逻辑上会增长以适应新显示的内容，但是由于 height 属性没有改变，因此过渡不会生效。有没有办法克服这种行为？如果可能的话，我想保留css的解决方案。

【问题讨论】：

您不能根据自动高度为高度设置动画，您必须将其设置为 X % 或 X px 才能使用 css 进行动画处理，另一种方法是使用 JavaScript 在自动高度时获取高度从 0px 动画到新高度。
这就是我害怕的。希望这在未来的修订版中得到改变
它对自己的height属性的值没有影响，但对它的父母的height属性有影响。
哦，我的错。我看错了你的代码。

标签： html css css-transitions

【解决方案1】：

您在谈论两个不同的 CSS 属性：height 和 display。您的转换仅适用于 height 属性，即使使用 display: none; 元素也保持相同的 height。

实际上，您可以这样做：

setTimeout(function() {
  document.getElementById("hid").className = "";
}, 1000);

.grow div {
  transition: height 3s ease-in-out;
  display: block;
  height: 20px;
  overflow: hidden;
}
.grow .hidden {
  height: 0;
}

<ul>
  <li>
    <div class="grow">
      <div class="hidden" id="hid">.AaA..</div>
    </div>
  </li>
</ul>

希望对你有帮助。

【讨论】：

是的，我想我可以做这样的事情，我只是希望有一种方法可以转换计算样式而不是实际的样式属性

【解决方案2】：

正如 Rolyataylor2 所述，您无法为自动尺寸设置动画。我之前也遇到过这个问题，有一个比较简单的基于JS的解决方案。

查看this Codepen。它使用我编写的一个小型 jQuery 插件将可变高度容器的高度设置为根据其子项的高度计算得出的高度。它实际上是克隆元素，测量高度，销毁克隆，并显式设置原始元素的计算高度。

这是插件的完整代码，here's the Gist. 它是用 Coffeescript 编写的，但如果需要，我可以将其转换为 JS。干杯！

$.fn.extend
  setContentHeight: ->
    return @each ->
      $(@).css('height', $(@).getContentHeight())

  getContentHeight: ->
    elem = $(@).clone().css(
      "height":"auto"
      "display":"block"
    ).appendTo($(@).parent())
    height = elem.css("height")
    elem.remove()
    return height

【讨论】：

感谢 ntdb 我在这个项目中使用 Angular，所以我可能会将其转换为指令。我喜欢尝试在 CSS 中尽可能多地保留与视图相关的信息，但这很有帮助。再次感谢。