javascript - 如何使用跨越多列的单列为表格行设置动画？

Question

我正在使用 Angular 的 ngAnimate 将 CSS 动画应用于表格。单击表格上的一行时，我希望描述以动画方式打开。描述是第二个表格行，其中有一个 td，它有一个 colspan="7"。但是，在动画期间，它只会动画到表格的第一列。动画完成后，它会展开以占据整个宽度。下面是一个显示行为的动画 gif。

关于如何解决这个问题的任何想法？我已经尝试了很多不同的东西，包括保持 tr 和 td 可见但没有内容，然后在 td 中为元素设置动画.但是，当我这样做时，动画根本不会发生；该行突然打开并立即关闭，就好像根本没有动画一样。

这是应用于表格行的动画 CSS。

.animate-slide-down.ng-hide-add,
.animate-slide-down.ng-hide-remove.ng-hide-remove-active {
  transition: 1s ease-out all;
  transform: scale(1);
  transform-origin: right;
  line-height: 1.42857;
  display: block !important;
}

.animate-slide-down.ng-hide-remove,
.animate-slide-down.ng-hide-add.ng-hide-add-active {
  transition: 1s ease-out all;
  transform: scale(0);
  transform-origin: left;
  line-height: 0;
  display: block !important;
}

Answer 1

没关系。我想到了。它与 display CSS 属性有关。 Angular 的 ngShow 指令在隐藏元素时将 display: none 应用于该元素。此属性会使折叠动画根本不起作用。为了解决这个问题，我将 display: block !important 应用于动画选择器(我过去做过很多次，所以我没有三思而后行)。表格行没有用display: block显示，需要设置为display: table-row !important。

一旦我将我的动画规则更改为:

.animate-slide-down.ng-hide-add,
.animate-slide-down.ng-hide-remove.ng-hide-remove-active {
  transition: 1s ease-out all;
  transform: scale(1);
  transform-origin: right;
  line-height: 1.42857;
  display: table-row !important;
}

.animate-slide-down.ng-hide-remove,
.animate-slide-down.ng-hide-add.ng-hide-add-active {
  transition: 1s ease-out all;
  transform: scale(0);
  transform-origin: left;
  line-height: 0;
  display: table-row !important;
}

问题解决了:)