如何在angular 2中动画子组件？

npm install @angular/animations --save

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
  // ...
})
export class AppModule { }

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

@Component({
  // ...
  animations: [
    trigger('myAnimation', [
      state('start', style({
        // 定义起始状态的样式
      })),
      state('end', style({
        // 定义结束状态的样式
      })),
      transition('start => end', [
        // 定义从起始状态到结束状态的过渡动画
        animate('500ms ease-out')
      ]),
      transition('end => start', [
        // 定义从结束状态到起始状态的过渡动画
        animate('500ms ease-in')
      ])
    ])
  ]
})
export class AppComponent {
  // ...
}

<div [@myAnimation]="currentState"></div>

export class AppComponent {
  currentState = 'start';

  toggleAnimation() {
    this.currentState = this.currentState === 'start' ? 'end' : 'start';
  }
}