Angular2 애니메이션, X 초 단위의 레이블 표시

Question

angular2 애니메이션을 사용하여 X 초 동안 레이블을 표시하려면 어떻게해야합니까? 이상 적으로는 입력란 옆에 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) 

    } 
}