如何在Angular2中將動畫應用於具有基本組件的多個組件？

Question

在我的應用中，當組件使用路由從菜單加載時，我想使用一些動畫。 我能夠成功地用角度動畫做到這一點。 我必須在單個組件中應用動畫才能實現此目的。 我需要知道是否有更好的方法將動畫應用於一組組件或從特定基類繼承的組件？

目前，我已將自己的動畫應用於

import { Component, OnInit } from '@angular/core';
import { routerTransition } from "../animations/animations";

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  animations: [routerTransition()],
  host: {'[@routerTransition]': ''}
})
export class BaseComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

動畫代碼

import {trigger, state, animate, style, transition} from '@angular/core';

export function routerTransition() {
  return slideToLeft();
}

function slideToLeft() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    transition(':enter', [  // before 2.1: transition('void => *', [
      style({transform: 'translateX(100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [  // before 2.1: transition('* => void', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ]);
}

我試過的

我嘗試創建一個基礎組件，在其中應用了動畫屬性，並在所需的其他組件中擴展了基礎組件。 此后動畫停止工作。

請讓我知道是否可以在不將動畫應用於單個組件的情況下重復使用它們。

Answer 1

檢查本教程 ，很好地解釋了如何使用動畫：對於多個元素上的動畫，您應該使用狀態不同的許多觸發器。 檢查視頻。

Answer 2

從4.2版開始，Angular支持通過動畫DSL中較新的query()和stagger()功能對多個元素進行動畫處理。

本文介紹了新功能： https : //www.yearofmoo.com/2017/06/new-wave-of-animation-features.html