Angular 4 Animate逐项列出列表

Question

我希望逐项制作一个列表ul > li动画。

查询:enter ，但是当列表元素更改时，我需要在:enter 之前设置:leave状态的动画，我该怎么做？

按照我的实际代码：

@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>

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 })

  ])
])