html - 点击动画即可折叠整个表格

Question

我有一个表格，我希望能够单击表格标题行，这将折叠表格的其余部分，仅留下标题行(并展开回来)。经过一番努力，我能够让表格在单击时实际改变其高度，但无法触发动画。这是我迄今为止拥有的CSS:

table {
  height: 100%;
  display: block;
  overflow: hidden;
}

.collapsed {
  animation-name: collapse;
  animation-duration: 2s;
}

@keyframes collapse {
  from { height: 100%; }
  to { height: 40px; }
}

/* This is the javascript that is trigger on click */
this.refs.ruleslisttable.classList.toggle("ruleSetInfo__rule-list-table--collapsed");

当我在 table 上切换类时，上面的代码甚至不会触发新的高度，但我一直在尝试在其中获取动画。

Answer 1

您实际上并不需要使用关键帧动画来做到这一点。

您只需向 table 元素添加 transition 规则即可做到这一点，如下所示:

table {
  height: 100%;
  display: block;
  overflow: hidden;
  transition: height 2s ease-in;
}

.collapsed {
    height: 40px;
}

它的作用是告诉浏览器在 2 秒内将 table 的 height 从 100% 转换为 40px，反之亦然，并显示 ease-in功能

有关更多信息，您可以阅读有关过渡属性的条目 MDN

干杯

更新:

在您当前的设置中，我认为 table 元素的父元素没有严格定义的高度。

基于百分比的高度的工作方式如下:元素获取其父高度的 100%。

但是当您没有指定父级的高度时，无论是 px、em、rem >、vh 或者什么，具有 height: 100% 的 child 就像具有 height: auto 一样。 Reference

这里是实际的问题:您无法从 auto 转换为任何其他值，例如 %、px 等。

您只能从一个定义值 (!== auto) 转换为任何其他定义值。例如从 px 到 rem 等

这就是您的转换不起作用的原因。

参见this fiddle 我做了。调整 #cont 元素的高度，看看会发生什么。

因此，简而言之:您必须为表格指定严格的高度，或者，如果您想使其保持基于百分比，则为其父元素指定严格的高度。