计算样式上的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删除隐藏类，div将在逻辑上增长以适应新显示的内容，但是，由于height属性没有更改，所以转换不会生效。有办法克服这种行为吗？如果可能的话，我想保留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的解决方案。

看看这个科迪芬。它使用了我编写的一个小jQuery插件来根据其子容器的高度将可变高度容器的高度设置为其计算的高度。它实际上克隆了元素，度量了高度，破坏了克隆，并显式地在原始元素上设置了计算的高度。

这是插件和这是吉斯特。的完整代码，它是用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