Angular2 高度动画 - 相同的状态转换

Question

我的组件上附加了以下动画代码

animations:[
        trigger('slide', [
            state('show', style({
                height: '*'
            })),
            state('hide', style({
                position: 'relative',
                height: 0,
                overflow: 'hidden'
            })),
            transition('show <=> hide',animate('130ms ease-out'))
        ])
    ]

这很难解释，（而且我似乎无法让动画在 plunker 上运行），但就是这样。

目前的功能如下：

1. 用户单击按钮以显示表格。
2. 表格从 div 下方顺利滑入视图。
3. 用户再次点击按钮。
4. 表格顺利滑出视图，滑入 div。

所需的功能如下：

1. 用户单击按钮以显示表格。
2. 表格从 div 下方顺利滑入视图。
3. 向表中添加了更多行（可能是大量行）
4. 动画处理新的表格高度，而不是立即显示，而是通过平滑动画逐渐移动到新高度。
5. 用户点击按钮。

6. 表格再次滑回 div 下。

   编辑：这是一个plunker 演示。您可以看到，当您在表格中添加/删除行时，动画不会顺利移动到新高度。

问题是因为如果你处于true状态并且添加了行。

动画不会再次转换为true，因为它已经处于true状态。

那么当添加项目时，我将如何触发到“newHeight”状态的转换？

Answer 1

我使用角度动画 API 制作了一个快速、粗略的动画示例：

https://embed.plnkr.co/7qWuHmbFFie4p8Y9h53T/

我会玩弄那个 plnkr，直到你得到正确的动画。您可以通过在模板中使用 *ngIf 切换动画来完全移除表格，或者按照我在 plnkr 中显示的方式进行操作，但在动画之后切换表格的可见性，从而将元素隐藏在某些东西后面已经完成。 I prefer the *ngIf way.

对于添加或删除的个别行：

我会为表格的每一行添加一个@animation，如果行数增加则启用向上动画，如果行数减少则启用向下动画。