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;
}

这样做是告诉浏览器将height的{{1}}从100％转换为40px，并且在持续时间为2s的情况下使用ease-in函数

有关详细信息，您可以在MDN

阅读有关过渡属性的条目

干杯

<强>更新

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

基于百分比的高度的工作方式如下：元素获得其父高度的100％。

然而如果您没有为父级指定高度，请将其放在table，px，em，rem或者有你，vh的孩子就像拥有height: 100%一样。 Reference

以下是实际问题：您无法从height: auto转换为任何其他值，例如auto，%等。

您只能从一个定义的值（！== px）转换为任何其他定义的值。例如从auto到px等

这就是你的过渡无效的原因。

见this fiddle 我做的。使用rem元素的高度进行游戏，看看会发生什么。

所以，简而言之：你要么必须给你的桌子一个严格的高度，要么，如果你想保持它的百分比，给它的父元素一个严格的高度。

单击动画时折叠整个表格

1 个答案: