Angular2动画，显示X秒数的标签答案

【问题标题】：Angular2 animation, show label for X amount of secondsAngular2动画，显示X秒数的标签
【发布时间】：2016-10-29 03:10:06
【问题描述】：

如何使用 angular2 动画在 X 秒内显示标签？理想情况下，我想在我的输入框旁边显示一个saved! 标签，它会淡入并停留 2 秒，然后淡出。我可以很容易地让动画淡出它，但我怎样才能让它淡出呢？

这是我的动画：

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

【问题讨论】：

标签： animation angular angular2-animation

【解决方案1】：

演示：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)

  }
}

【讨论】：