我正在尝试在列表中添加交错动画。到目前为止,我已经成功加载了交错动画。除了加载时,我还希望在将新项目添加到数组时使用交错动画触发器。
并提出了一个快速测试: 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)' }))
])
])
我的情况的主要区别在于,我要一次向数组中添加多个对象。我不知道是否有可能使新项目以交错方式进入页面。
答案 0 :(得分:0)
我设法通过更改父级动画来解决此问题,
trigger('list', [
transition('* => *', [
query(':enter',
stagger(250, animateChild())
)
])
])
因此,不仅在列表处于“输入”状态时,转换还将在任何状态下触发。此外,查询现在检查':enter'
,这意味着它将获取进入列表的所有新元素。
要触发动画,我将组件保存在列表中,以此类推,动画触发的列表中的每个更改。
父模板
<div [@list]="list.length">
....
</div>
更新的堆叠闪电战
https://stackblitz.com/edit/angular-stagger-animation-test2
参考: