多个新元素的角度交错动画

时间:2018-09-25 14:53:48

标签: angular angular-animations

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

我遵循以下示例: 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()触发子组件中的动画。

儿童动画:

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

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

1 个答案:

答案 0 :(得分:0)

我设法通过更改父级动画来解决此问题,

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

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

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

父模板

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

更新的堆叠闪电战

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

参考: