我有一个包含: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() {}
}