首页 文章

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

提问于
浏览 次
1

我有以下动画代码附加到我的组件

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

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

目前的功能如下：

  • 用户单击按钮以显示表格 .

  • 表从div下方平滑地滑入视图 .

  • 再次用户点击按钮 .

  • 表平滑地从视图中滑出到div中 .

所需的功能如下：

  • 用户单击按钮以显示表格 .

  • 表从div下方平滑地滑入视图 .

  • 向表中添加更多行（可能是大量行）

  • Animation handles the new table height and instead of just instantly being displayed there is a smoothing animation to gradually move to the new height.

  • 用户点击按钮 .

  • 表再次在div下滑回 .

编辑：这是一个plunker演示 . 您可以看到在表中添加/删除行时动画无法平滑移动到新高度 .

导致该问题的原因是，如果您处于 true 状态并添加了行 .

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

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

css angular animation

1 回答

  • 0

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

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

    我会玩那个plnkr直到你得到正确的动画 . 您可以通过在模板中使用* ngIf切换动画来完全删除表格后隐藏元素，或者按照我在plnkr中显示的方式执行，但在动画后切换表格的可见性完成了 . I prefer the *ngIf way.

    For individual rows being added or removed ：

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

    回复于

相关问题