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。

实际上，你可以做的是这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望它对你有所帮助。

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转换

2 个答案: