html - 计算样式上的 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 逻辑上会增长以适应新显示的内容，但是由于高度属性没有改变，转换不会生效。有没有办法克服这种行为？如果可能的话，我想保留 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>

希望对你有帮助。