我在@Component中遇到主机问题

Question

如何使动画在浏览器上正常播放？尤其是在@Component中使用主机后

这是我的menu.component.ts：

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
  host: {
    '[@flyInOut]': 'true',
    'style': 'display: block;'
    },
    animations: [
      flyInOut()
    ]
})

这是我的app.animation.ts：

export function flyInOut() {
    return trigger('flyInOut', [
        state('*', style({
            opacity: 1,
            transform: 'translateX(0)'
        })),
        transition(':enter',[
            style({transform: 'translateX(-100%)', 
            opacity: 0
        }),
            animate('500ms ease-in')
        ]),
        transition(':leave', [
            animate('500ms ease-out', style({
                transfrom: 'translateX(100%)', 
                opacity: 0
            }))
        ])
    ])
}

我希望动画可以在浏览器上正常工作，但是在使用主机后它无法正常工作。

Answer 1

我有类似的问题。我通过将函数直接放在组件中而不是使用导出的函数来解决它。

export function slideToLeft () {
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ left: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ left: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ left: '0%'}))
      ])
    ]),
  ];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ 
    trigger('routeAnimations', [
      transition('FirstPage => SecondPage', slideToRight())
    ])
  ]
})
export class AppComponent implements ...