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

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

解决了这个问题：）