如何实现Angular Route动画？

.slide-in {
  transform: translateX(-100%);
}

.slide-out {
  transform: translateX(100%);
}

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  animations: [
    trigger('slideInOut', [
      state('in', style({ transform: 'translateX(0)' })),
      state('out', style({ transform: 'translateX(100%)' })),
      transition('in => out', animate('300ms ease-in-out')),
      transition('out => in', animate('300ms ease-in-out'))
    ])
  ]
})
export class ExampleComponent implements OnInit {
  // ...
}

const routes: Routes = [
  { path: 'example', component: ExampleComponent, data: { animation: 'example' } }
];

<div [@slideInOut]="animationState">
  <!-- 内容 -->
</div>

import { ActivatedRoute } from '@angular/router';

export class ExampleComponent implements OnInit {
  animationState: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.animationState = data.animation;
    });
  }
}