点击动画折叠整个表格

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");

当我在桌子上切换班级时，上面的代码甚至不会触发新的高度，但我一直在尝试在那里获得动画。

Answer 1

你真的不需要用keyframe 动画来做。

您只需将transition 规则添加到table 元素即可，如下所示：

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

.collapsed {
    height: 40px;
}

这样做的目的是告诉浏览器使用ease-in 函数将table 的height 从100% 转换为40px，反之亦然，持续2 秒。

有关更多信息，您可以在MDN阅读有关转换属性的条目

干杯

更新：

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

基于百分比的高度的工作方式是这样的：元素获取其父高度的 100%。

然而当你没有为父母指定高度时，无论是px、em、rem、vh 或者你有什么，@987654337 的孩子@ 就像拥有height: auto。 Reference

这是真正的问题：您不能从auto 转换为任何其他值，例如%、px 等。

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

这就是为什么你的过渡不起作用。

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

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