Angular2 动画,显示 X 秒的标签
Angular2 animation, show label for X amount of seconds
如何使用 angular2 动画在 X 秒内显示标签?理想情况下,我想在我的输入框旁边显示一个 saved!
标签,它会淡入并停留 2 秒,然后淡出。我可以很容易地让动画淡出它,但是我怎样才能让它淡出呢?
这是我的动画:
animations: [
trigger('hasSaved', [
state('inactive', style({
opacity: 0
})),
state('active', style({
opacity: 1
})),
transition('inactive => active', [
animate(500)
])
])
]
演示版: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)
}
}
如何使用 angular2 动画在 X 秒内显示标签?理想情况下,我想在我的输入框旁边显示一个 saved!
标签,它会淡入并停留 2 秒,然后淡出。我可以很容易地让动画淡出它,但是我怎样才能让它淡出呢?
这是我的动画:
animations: [
trigger('hasSaved', [
state('inactive', style({
opacity: 0
})),
state('active', style({
opacity: 1
})),
transition('inactive => active', [
animate(500)
])
])
]
演示版: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)
}
}