如何通过自动属性计算为 <tr> 打开/关闭设置动画答案

【问题标题】：How to animate a <tr> opening/closing up and down with automatic property calculation如何通过自动属性计算为 <tr> 打开/关闭设置动画
【发布时间】：2017-02-28 13:14:11
【问题描述】：

我有一个表格行，在您单击其上方行上的“查看详细信息”按钮之前，该行不可见。目前我正在使用 *ngIf 来显示第二行并在单击“查看详细信息”按钮时更改绑定对象的布尔属性。我已经阅读了 angular2 文档上的动画页面，并尝试实现“折叠/展开”动画，以便当第二个表格行变得可见时，它的动画从 0px 高度 -> 完全展开的行的高度 (*px)。

我看到的最接近我想做的例子是这个动画，它将英雄从它的高度 (*px) 移除到 0px，并且它顺利地折叠/向上滑动。

animations: [
 trigger('shrinkOut', [
  state('in', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(250, style({height: 0}))
  ])
 ])
]

我无法在上述情况下使用它。我尝试将它与 *ngIf 结合使用，但没有奏效。（该行就像添加动画之前一样立即打开/关闭。）我尝试摆脱 *ngIf 并绑定到 [hidden] 属性，但没有成功。我还尝试删除 *ngIf 和 [hidden] 并仅显示动画，但这也不起作用（该行只是保持打开状态而从未关闭。）

我的第二个表格行 HTML 看起来像：

<tr [@visibilityChanged]="visibility">
      <td  colspan="8" class="details-row">
          ...
      </td>
</tr>

我的动画看起来像：

trigger('visibilityChanged', [
  state('hidden', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(1000, style({height: 0}))
  ])
])

可见性变量是组件中的一个字符串，当单击查看详细信息按钮时，它会从“隐藏”变为“显示”，反之亦然。

我想要通过 angular 2 动画实现的目标可行吗？

【问题讨论】：

标签： angular angular2-animation

【解决方案1】：

我自己为此苦苦挣扎了好一阵子。然后我意识到，我们需要为单元格高度设置动画，而不是行高。是每个表格单元格中的文本导致您的行保持在其固定高度，并且不尊重行高动画，因此，该行永远不会折叠，它只是“捕捉”到视图中。

因此，将触发器绑定添加到每个 td，如下所示：（仅显示两个单元格以节省空间）

<tr>
<td class="col3Destination" [@rowVisibleState]="row.isVisible">{{row.version}} 
/td>
<td class="col4Destination" [@rowVisibleState]="row.isVisible">{{row.dataType}}</td>
</tr>

这里是动画组件代码：

animations: [
        trigger('rowVisibleState',
        [
            state('true',
                style({
                   height: '40px',
                   opacity: 1,
                   fontSize: '14px',
                   display: 'table-row'
                })),

            transition('0 => 1', [
                animate('500ms ease-in', keyframes([
                    style({ display: 'table-row', offset: 0 }),
                    style({ fontSize: 0, offset: 0 }),
                    style({ height: 0, offset: 0 }),
                    style({ opacity: 0, offset: 0.0 }),
                    style({ height: '40px',fontSize: '14px', display: 'table-row', opacity: 1, offset: 1.0 })
                ]))
            ]),
            state('false',
                style({
                    height: '0px',
                    opacity: 0,
                    display: 'none',
                    fontSize: 0
                })),
            transition('1 => 0', [
                animate('500ms ease-out', keyframes([
                    style({ opacity: 1, offset: 0 }),
                    style({ fontSize: '14px', offset: 0 }),
                  style({ height: '40px', offset: 0 }),
                  style({ fontSize: 0, height: 1, opacity: 0.5, offset: 0.9}),
                  style({ height: '0px', opacity: 1, display: 'none', offset: 1.0 })

                ]))
            ])
            ])
    ]

【讨论】：