子要素のアニメーションが完了してから新しいルートに移動するまで待つ

Question

:enterと:leaveのアニメーションを持つ要素が含まれているルートがあります。 リトル色を変更するようなもの、フェードインなど

、ルート変更をページを離れると、完了する前に発射する:leaveアニメーションを待たないときにページがしかし、うまく:enterアニメーションの火をロードします経路変更。

経路変更を一時停止してアニメーションが完了するのを待つ方法はありますか？

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

を試すこと