我有2个具有关键帧的触发器,如何并行运行这些动画? 如果我现在运行它,则首先将启动表单容器动画,然后将开始登录表单动画。
component.html
<div [@form-container]="canShowLogin ? 'move' : 'default'" class="register-container">
<app-register-page [@login-form]="canShowLogin ? 'move' : 'default'"></app-register-page>
<app-login-page [@login-form]="canShowLogin ? 'default' : 'move'"></app-login-page>
</div>
animations.ts
trigger('form-container', [
state('default', style({
right: 0,
left: 'unset',
})),
transition('default => move', [
animate(
'1.2s ease',
keyframes([
style({right: '40%', offset: 1}),
])
)
]),
state('move', style({
left: 0,
right: 'unset'
})),
transition('move => default', [
animate(
'1.2s ease',
keyframes([
style({left: '40%', offset: 1}),
])
)
]),
]),
trigger('login-form', [
state('default', style({
display: 'flex',
})),
transition('default => move', [
animate('1.2s ease',
keyframes([
style({display: 'flex', offset: .39}),
style({display: 'flex', offset: .4}),
]))
]),
state('move', style({
display: 'none'
})),
transition('move => default', [
animate('1.2s ease',
keyframes([
style({display: 'none', offset: .39}),
style({display: 'none', offset: .4}),
]))
])
]),
感谢您的关注和帮助!