在移動到新路線之前等待子元素的動畫完成

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