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

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

这解决了问题:)