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

  ])
])