Angular 如何设置a<；tr>；通过自动特性计算向上/向下打开/关闭

我有一个表格行，在您单击其上方行上的“查看详细信息”按钮之前，该行不可见。当前，我使用*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动画实现的目标可能吗？

我自己也为此奋斗了很长一段时间。然后我意识到，我们需要设置单元格高度的动画，而不是行高度的动画。正是每个表格单元格中的文本使行保持其固定高度，而不考虑行高动画，因此，行永远不会折叠，它只是“捕捉”到视图中

因此，将触发器绑定添加到每个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 })

                ]))
            ])
            ])
    ]