angular2 组件中的多个动画触发器
Multiple animation triggers in angular2 Component
我想在一个组件中定义多个动画触发器。这可能吗?
比如一个进入场景,一个悬停。
还是我需要为这种情况定义两个组件(父子)?
item.compoennt.ts
// removed the import and class part for better readability
@Component({
selector: 'item',
templateUrl: './item.template.html',
styleUrls: ['./item.style.scss'],
animations: [
// page load animation
trigger('slideIn', [
state('in', style({
opacity: 1,
transform: 'translateY(0)'
})),
transition('void => *', [
style({
transform: 'translateY(100%)',
opacity: 0
}),
animate('0.5s 100ms ease-in')
])
]),
// <--- this fails
// hover animation
trigger('fadeIn', [
state('over', style({
opacity: 1
})),
transition('void => *', [
style({
opacity: 0
}),
animate('0.5s 100ms ease-in')
])
],
})
item.template.html
<div class="item" [@slideIn]="enterState">
<div class="info">
SOME INFO
</div>
<div class="info-on-hover" [@fadeIn]="hoverState">
SOME INFO
</div>
</div>
哦,应该有人创建标签 "angular2-animation"
此致
I would like to define multiple animation triggers in one component. Is this possible?
是的,您可以根据需要设置任意数量的触发器。
您还可以在一个触发器中设置多个状态,而不仅仅是两个。因此,例如,您可以有一个 'enter' 状态和一个 'hover' 状态,状态之间有不同的转换。
例如:
state('in', style({opacity: 1,
transform: 'translateY(0)'
})),
state('hover', style({background: 'red'}),
transition('* <=> hover', animate('200ms ease-in'))
我想在一个组件中定义多个动画触发器。这可能吗?
比如一个进入场景,一个悬停。 还是我需要为这种情况定义两个组件(父子)?
item.compoennt.ts
// removed the import and class part for better readability
@Component({
selector: 'item',
templateUrl: './item.template.html',
styleUrls: ['./item.style.scss'],
animations: [
// page load animation
trigger('slideIn', [
state('in', style({
opacity: 1,
transform: 'translateY(0)'
})),
transition('void => *', [
style({
transform: 'translateY(100%)',
opacity: 0
}),
animate('0.5s 100ms ease-in')
])
]),
// <--- this fails
// hover animation
trigger('fadeIn', [
state('over', style({
opacity: 1
})),
transition('void => *', [
style({
opacity: 0
}),
animate('0.5s 100ms ease-in')
])
],
})
item.template.html
<div class="item" [@slideIn]="enterState">
<div class="info">
SOME INFO
</div>
<div class="info-on-hover" [@fadeIn]="hoverState">
SOME INFO
</div>
</div>
哦,应该有人创建标签 "angular2-animation"
此致
I would like to define multiple animation triggers in one component. Is this possible?
是的,您可以根据需要设置任意数量的触发器。
您还可以在一个触发器中设置多个状态,而不仅仅是两个。因此,例如,您可以有一个 'enter' 状态和一个 'hover' 状态,状态之间有不同的转换。
例如:
state('in', style({opacity: 1,
transform: 'translateY(0)'
})),
state('hover', style({background: 'red'}),
transition('* <=> hover', animate('200ms ease-in'))