在移动到新路线之前，等待子元素的动画完成

Question

我的路线包含具有:enter和:leave动画的元素。 改变颜色，淡入等等一些小事情。

当页面加载:enter动画时，如果离开页面，路线会发生变化，并且在完成路线更改之前不会等待:leave动画点火。

有没有办法暂停路线更改以等待动画完成？

Answer 1

你可以试试这个

@Component({
  selector: 'selector',
  styles:[`div {background-color: blue;}`],
  template: `
  <div class="row " [@routerTransition]>
    <h2>Component</h2> 
  </div>
  `,
    animations: [trigger('routerTransition', [
      state('void', style({opacity: 1, height: 0}) ),
      state('*', style({opacity: 1}) ),
      transition('void => *', [
        style({opacity: 0}),
        animate('1s ease-in-out', style({opacity: 1}))
      ]),
      transition('* => void', [
        style({opacity: 1}),
        animate('0.5s ease-in-out', style({opacity: 0}))
      ])
   ])]
})
export class YourComponent {
    constructor() {}
}