我正在使用组件装饰器的host属性声明一个动画触发器,其中包含* => void的过渡状态 .
我知道它是触发因为我已经应用了800ms的持续时间(用于测试,我将其更改为5秒以确定),当我单击routerLink将其带到另一个组件时,发生了5秒的延迟 .
问题是,没有动画发生 . 它应向左滑动并渐变为不透明度:0 .
这是组件装饰器中的代码:
host: {
'[@slideInOutright]': 'true',
},
animations: [
trigger('slideInOutright', [
state('*', style({transform: 'translateX(0)'})),
transition('void => *', [
style({transform: 'translateX(150px)', opacity:'1'}),
animate('300ms 500ms ease-out')
]),
transition('* => void', [
animate('800ms', style({transform: 'translateX(-60px)',opacity: '0'}))
])
])
]
1 回答
您应该调用您的州
true
而不是*
.