CSS 计算样式的过渡

Question

是否可以 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 删除隐藏的 class 逻辑上 div 将增长以适应新显示的内容，但是由于高度属性没有变化，过渡不生效。有没有办法克服这种行为？如果可能的话，我想保留 css.

的解决方案

Answer 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>

希望对你有帮助。

Answer 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

CSS 计算样式的过渡

CSS Transitions On Computed Styles

html

css

css-transitions