角度4.2 DSLアニメーション

Question

Angular 4.2の新しいアニメーションAPIを使用して、fadeIn/fadeOutエフェクトを作成しようとすると簡単な例を作成しようとしています。しかし、遷移fadeOut => fadeInは呼び出されていないようです。どうして？

trigger('divAnimation', [ 

    state('fadeIn', style({opacity: 1})), 
    state('fadeOut', style({opacity: 0})), 

    transition('* => fadeIn', [ 
    query('span, p', style({transform: 'translateX(-50px'})), 

    query('span, p', [ 
     animate(500, style({opacity: 1, transform: 'translateX(0)'})), 
    ]) 

    ]), 

    transition('* => fadeOut', [ 
     query('span, p', [ 
     animate(500, style({opacity: 0})) 
     ]) 

    ]) 

]) 

https://plnkr.co/edit/0C5Esoszz7zkCrDeVVoS?p=preview

Answer 1

このお試しください：

animations: [ 
trigger('divAnimation', [ 

    state('fadeIn', style({opacity: 0})), 
    state('fadeOut', style({opacity: 1})), 

    transition('fadeIn <=> fadeOut', animate(500)) 

    ]) 
],