Angular 多个新元素的交错动画
Angular Stagger Animation for multiple new elements
我正在尝试在列表中制作交错动画。到目前为止,我已经成功加载了交错动画。除了加载之外,我还希望在将新项目添加到数组时触发交错动画。
并想出了一个快速测试: 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)' }))
])
])
我的情况的主要区别在于我一次向数组添加了多个对象。不知道可不可以让新item交错进入页面
我设法通过像这样更改父动画来解决这个问题:
trigger('list', [
transition('* => *', [
query(':enter',
stagger(250, animateChild())
)
])
])
所以转换会在任何状态触发,而不仅仅是当列表处于 "enter" 状态时。此外,查询现在检查 ':enter'
,这意味着它将获取进入列表的任何新元素。
为了触发动画,我将组件保存在列表中,依此类推,列表中的每个更改都会触发动画。
父模板
<div [@list]="list.length">
....
</div>
已更新 stackblitz
https://stackblitz.com/edit/angular-stagger-animation-test2
参考文献:
我正在尝试在列表中制作交错动画。到目前为止,我已经成功加载了交错动画。除了加载之外,我还希望在将新项目添加到数组时触发交错动画。
并想出了一个快速测试: 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)' }))
])
])
我的情况的主要区别在于我一次向数组添加了多个对象。不知道可不可以让新item交错进入页面
我设法通过像这样更改父动画来解决这个问题:
trigger('list', [
transition('* => *', [
query(':enter',
stagger(250, animateChild())
)
])
])
所以转换会在任何状态触发,而不仅仅是当列表处于 "enter" 状态时。此外,查询现在检查 ':enter'
,这意味着它将获取进入列表的任何新元素。
为了触发动画,我将组件保存在列表中,依此类推,列表中的每个更改都会触发动画。
父模板
<div [@list]="list.length">
....
</div>
已更新 stackblitz
https://stackblitz.com/edit/angular-stagger-animation-test2
参考文献: