多个新元素的角度交错动画 [英] Angular Stagger Animation for multiple new elements

问题描述

我正在尝试在列表中添加交错动画.到目前为止，我已经成功加载了交错动画.除了加载时，我还希望在将新项目添加到数组时使用交错动画触发器.

I'm trying to have a stagger animation in a list. Up till now I have managed to have the stagger animation on load. Apart from on load I'd like to have the stagger animation trigger when new items are added to the array.

我遵循以下示例: https://medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e

并提出了一个快速测试: https://stackblitz.com/edit/angular-stagger-animation-test2

在 app.component.ts 中定义交错动画，在 child.component.ts 中定义元素的动画.

In the app.component.ts I define the stagger animation and in the child.component.ts I define the element's animation.

交错动画:

trigger('list', [
    transition(':enter', [
        query('@animate',
            stagger(250, animateChild())
        )
    ])
])

query('@ animate')获取子组件元素，而 animateChild()触发子组件中的动画.

The query('@animate') gets the child component element, with the animateChild() triggering the animation in the child component.

儿童动画:

trigger('animate', [
  transition(':enter', [
    style({ opacity: 0, transform: 'translateY(-10px)' }),
    animate('250ms', style({ opacity: 1, transform: 'translateY(0px)' }))
  ]),
  transition(':leave', [
    style({ opacity: 1 }),
    animate('250ms', style({ opacity: 0, transform: 'translateY(10px)' }))
  ])
])

我的情况的主要区别在于，我要一次向数组中添加多个对象.我不知道是否有可能让新的项目以交错的方式进入页面.

The main difference in my case is that I'm adding multiple objects to the array at once. I don't know if it possible to have the new items enter the page in a staggered manner.

推荐答案

我设法通过更改父级动画来解决此问题，如下所示:

I managed to solve this by changing the parent animation like so:

trigger('list', [
  transition('* => *', [
    query(':enter',
      stagger(250, animateChild())
    )
  ])
])

因此，不仅在列表处于输入"状态时，转换还将在任何状态下触发.此外，查询现在检查':enter'，这意味着它将获取进入列表的所有新元素.

So the transition will trigger on any state not just when the list is in the "enter" state. Furthermore, the query now checks for ':enter' which means that it will get any new elements that enter the list.

要触发动画，我将组件保存在列表中，以此类推，动画触发的列表中的每个更改.

To trigger the animation I am saving the components in a list and so on every change in the list the animation triggers.

父模板

<div [@list]="list.length">
  ....
</div>

更新的堆叠闪电战

https://stackblitz.com/edit/angular-stagger-animation-test2

参考:

• https://stackoverflow.com/a/47834376/2312637

  这篇关于多个新元素的角度交错动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！