Angular2 Height动画-相同状态转换 [英] Angular2 Height Animation - same state transition

问题描述

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

I have the following animation code attached to my component

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

这很难解释(而且我似乎无法让动画在plunker上正常工作)，但是就可以了.

This is quite hard to explain, (and I can't seem to get animations to work on plunker) but here goes.

当前功能如下:

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

所需的功能如下:

1. 用户单击按钮以显示表格.
2. 表格从div下方顺利滑入视图.
3. 更多行添加到表中(可能是很多行)
4. 动画会处理新的表格高度，而不是立即显示动画，而是将平滑动画逐渐移至新的高度.
5. 用户点击按钮.

6. 表格再次滑回div下.

1. User clicks a button to display table.
2. Table smoothly slides into view from below a div.
3. More rows are added to table (could be a large number of rows)
4. 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.
5. User Clicks button.

6. Table slides back up under div again.

这是一个 plunker 演示.您可以看到在表格中添加/删除行时，动画无法平稳地移动到新的高度.

here is a plunker demo. You can see when you add/remove rows from the table the animation does not smoothly move to the new height.

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

The problem is caused because if you are in true state and rows are added.

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

The animation will not transition to true again, because it is already in true state.

那么添加项目后如何触发向"newHeight"状态的转换?

So how will I trigger a transition to the "newHeight" state when items are added?

推荐答案

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

I made a quick, rough, animation example using angular animations API:

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

在您获得正确的动画之前，我会和那个plnkr一起玩.您可以通过在模板中使用* ngIf切换动画以使其动画化后完全删除表格，或者按照我在plnkr中显示的方式进行操作，但在动画之后切换表格的可见性，从而完全删除表格，从而将元素隐藏在某物后面做完了. 我更喜欢* ngIf方式.

I would play around with that plnkr until you get the animations right. You can hide the element behind something by either removing the table entirely after animating it down by toggling the animation with an *ngIf in your template, or do it the way I show in the plnkr, but toggle the visibility of the table after the animation is complete. I prefer the *ngIf way.

对于要添加或删除的单个行:

我会向表的每一行添加一个@animation，如果行数增加，则启用up动画；如果行数减少，则启用down动画.

I would add an @animation to every row of the table and enable the up animation if the number of rows increases, or down if it decreases.

这篇关于Angular2 Height动画-相同状态转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！