点击动画折叠整个表格

Posted 2023-03-06

【中文标题】点击动画折叠整个表格

【英文标题】：Collapse entire table on click with animation

【发布时间】：2016-07-03 02:59:57

【问题描述】：

我有一个表格，我希望能够单击表格标题行，这将折叠表格的其余部分，只留下标题行（并展开回来）。经过一番努力，我能够让桌子在点击时实际改变它的高度，但无法让动画触发。这是我到目前为止的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");

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

【参考方案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 元素的高度，看看会发生什么。

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

【讨论】：

很遗憾，当我点击 CSS 时，会有 2 秒的延迟，然后高度会发生变化。它实际上并没有缓解...：/

嗯。您能否提供 html 或示例 HTML 以及您正在使用的一些 JS？

当然，虽然不多。它只是在 DOM 元素上切换类。所以高度成功改变，但没有动画。

啊，好的。知道了。您不能从基于百分比的值转换为任何其他单位的值。我会用更多信息更新我的答案，请给我 5 分钟的时间来写。

更新了答案，大家可以去看看。