Animation Angular2动画,显示标签X秒
如何使用angular2动画在X秒内显示标签?理想情况下,我想显示一个Animation Angular2动画,显示标签X秒,animation,angular,angular2-animation,Animation,Angular,Angular2 Animation,如何使用angular2动画在X秒内显示标签?理想情况下,我想显示一个已保存我的输入框旁边的标签,该标签将淡入并保持2秒钟,然后淡出。我可以很容易地使动画淡入淡出,但如何使其淡出 这是我的动画: animations: [ trigger('hasSaved', [ state('inactive', style({ opacity: 0 })), state('active', style({
已保存代码>我的输入框旁边的标签,该标签将淡入并保持2秒钟,然后淡出。我可以很容易地使动画淡入淡出,但如何使其淡出
这是我的动画:
animations: [
trigger('hasSaved', [
state('inactive', style({
opacity: 0
})),
state('active', style({
opacity: 1
})),
transition('inactive => active', [
animate(500)
])
])
]
演示:
您可以使用*ngIf和setTimeout
来实现它
我正在使用关键帧来添加动画
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)
}
}