Angular2アニメーション、X秒間のラベルを表示

Question

Xの秒数のラベルを表示するには、どのようにangle2アニメーションを使用できますか？理想的には、入力ボックスの隣にsaved!ラベルを表示して、フェードインして2秒間滞在した後、フェードアウトすることをおすすめします。私は簡単にアニメーションをフェードアウトさせることができますが、どうすればフェードアウトできますか？ここで

は私のアニメーションです：

animations: [ 
    trigger('hasSaved', [ 
     state('inactive', style({ 
      opacity: 0 
     })), 
     state('active', style({ 
      opacity: 1 
     })), 
     transition('inactive => active', [ 
      animate(500) 
     ]) 
    ]) 
] 

Answer 1

DEMO：https://plnkr.co/edit/yfSdg1qoYz3oHzLWfG1U?p=preview

あなたはそれを達成するために一緒に* ngIfとsetTimeoutを使用することができます。

私はkeyframesを使用してアニメーションを追加しています。

animations: [ 
    trigger('hasSaved', [ 
    transition('void => *', [ 
     animate(1000, keyframes([ 
     style({opacity: 0, transform: 'translateX(-10%)',  offset: 0}), 
     style({opacity: 1, transform: 'translateX(-40px)', offset: 0.3}), 
     style({opacity: 1, transform: 'translateX(0)', offset: 1.0}) 
     ])) 
    ]), 
    transition('* => void', [ 
     animate(1000, keyframes([ 
     style({opacity: 1, transform: 'translateX(0)',  offset: 0}), 
     style({opacity: 1, transform: 'translateX(30px)', offset: 0.3}), 
     style({opacity: 1, transform: 'translateX(20%)', offset: 1.0}) 
     ])) 
    ]) 
    ]) 
] 

---

export class App { 
    showSave:boolean=false; 
    title = 'app works!'; 

    save(){ 
    this.showSave=!this.showSave; 
     setTimeout(()=>{ 
     this.showSave=!this.showSave; 
     },2000) 

    } 
}