时间戳

首页 > 解决方案 > 切换到相同长度的列表时，交错动画不起作用

angular - 切换到相同长度的列表时，交错动画不起作用

问题描述

我试图错开列表项的显示。我有一个包含 3 个类别的导航栏。对于每个类别，我将延迟列出每个项目，如下所示。当我从第 1 类（有 5 个项目）切换到第 2 类（有 3 个项目）时，动画会触发。但是，当我从第一类切换到第三类（也有 5 个项目）时，反之亦然，动画不会被触发。

<div [@catList]="items.length">
....

animations: [
  trigger('catList', [
    transition('* => *', [
      query(':enter', style({ opacity: 0 }), {optional: true}),
      query(':enter', stagger('200ms', [
        animate('1s ease-in', keyframes([
          style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
          style({opacity: .5, transform: 'translateY(35px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
        ]))]), {optional: true}),
    ])
  ]),
]

标签： angular

解决方案

这是因为您将动画触发器绑定@catList到items.length，当新长度和当前长度不同时，如您的第一种情况，从3到5，角度看到它已经改变，所以动画被触发。基本上 Angular 只是做一个简单的严格相等检查===，看看它是否需要运行动画。如果您的items数组不可变（您不是直接修改它，而是为每次修改返回一个新数组），那么您可以items像这样直接在绑定中使用，[@catList]='items'因为每次返回新数组时，引用都会更改，所以角的变化检测将启动并触发您的动画

推荐阅读