首页 文章

Angular 2动画路由组件的空白状态

提问于
浏览
-1

我正在使用组件装饰器的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 回答

  • 0

    您应该调用您的州 true 而不是 * .

相关问题