我正在尝试在列表中添加交错动画。到目前为止,我已经成功地加载了交错动画。除了加载之外,我还希望在将新项目添加到数组时触发交错动画。
我按照这个例子: https://medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e https://medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e
并提出了一个快速测试: https://stackblitz.com/edit/angular-stagger-animation-test2 https://stackblitz.com/edit/angular-stagger-animation-test2
In the app.component.ts
我定义了交错动画并在child.component.ts
我定义了元素的动画。
交错动画:
trigger('list', [
transition(':enter', [
query('@animate',
stagger(250, animateChild())
)
])
])
The 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)' }))
])
])
我的情况的主要区别是我一次向数组添加多个对象。不知道是否可以让新的项目以交错的方式进入页面。