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'))
        ])
    ]

这很难解释，（而且我似乎无法使用动画来制作动画）但是这里有。

目前的功能如下：

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，如果行数增加则启用向上动画，如果减少则启用向下动画。