我有一个包含:enter:leave动画元素的路由。
诸如变色、褪色等小事。
当页面加载:enter动画时会很好地触发,但是当离开页面时,路由会更改,并且不会等到:leave动画触发后再完成路由更改。
是否有方法暂停更改路线以等待动画完成?

最佳答案

你可以尝试这个

@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() {}
}

10-05 20:52
查看更多