Angular 5交错动画-如何反转

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  animations: [
    trigger('staggerAnimation', [
      transition('* => *', [
        animate('1s', keyframes([
          style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
          style({ opacity: 1, transform: 'translateY(0)', offset: 1 })
        ]))
      ])
    ])
  ]
})

<div [@staggerAnimation]="animationState" class="item">Item</div>

export class ExampleComponent implements OnInit {
  animationState: string;

  constructor() { }

  ngOnInit() {
    this.animationState = 'start';
  }

  reverseAnimation() {
    this.animationState = this.animationState === 'start' ? 'end' : 'start';
  }
}

reverseAnimation() {
  this.animationState = this.animationState === 'start' ? 'end' : 'start';
}