Question

我希望逐项动画列表ul > li。

查询:enter时没关系，但是当列表元素发生变化时，我需要在:leave :enter之前设置@Component({ selector: 'ng-list', templateUrl: './ng-list.component.html', encapsulation: ViewEncapsulation.None, animations: [ trigger('listAnimation', [ transition('* => *', [ query(':enter', style({ opacity: 0 }), { optional: true }), query(':enter', stagger('300ms', [ 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 }) ]) ]) ] }) export class NgListComponent { items: Array<any>; animateItems = false; constructor() { this.items = new Array<INgxSidemenuItem>(); } selectMenu(item: INgxSidemenuItem) { this.animate(); // ... } private animate() { this.animateItems = !this.animateItems; } }状态的动画，我该怎么办？

按照我的实际代码：

<div [@listAnimation]="animateItems"> <div class="menu-item" *ngFor="let item of items (click)="selectMenu(item)"> <a (click)="selectMenu(item)">{{ item.title }}</a> </div> </div>

exit

Answer 1

您不应该查询':enter'。 :enter只是void => *的简写，意味着可以在transition()中使用它来声明转换所考虑的状态之间。您要查询一个选择器。由于query()在幕后使用document.querySelectorAll()，因此您可以使用任何CSS选择器来选择要交错的元素。因此，您要做的就是通过标签或类名查询div。例如，使用类名称：

trigger('listAnimation', [
  transition('* => *', [

    query('.menu-item', style({ opacity: 0 }), { optional: true }),

    query('.menu-item', stagger('300ms', [
      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 4 Animate列表逐项

1 个答案: