多个新元素的 Angular Stagger 动画

Question

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

我遵循了这个例子: 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 中，我定义了元素的动画。

交错动画:

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

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

child 动画:

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

在我的案例中，主要区别在于我一次将多个对象添加到数组中。不知道可不可以让新item交错进入页面。

Answer 1

我设法通过像这样更改父动画来解决这个问题:

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

所以转换会在任何状态触发，而不仅仅是当列表处于“进入”状态时。此外，查询现在检查 ':enter'，这意味着它将获取进入列表的任何新元素。

为了触发动画，我将组件保存在一个列表中，因此列表中的每个更改都会触发动画。

父模板

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

更新的 stackblitz

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

引用资料:

• https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#using-query-and-stagger

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