我在@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 ...

const routes: Routes = [
    {
        path: 'home/firstPage',
        component: FirstPageComponent,
        canActivate: [AuthGuard],
        data: {
            animation: 'FirstPage'
        },
    },
    {
        path: 'home/secondPage',
        component: SecondPageComponent,
        canActivate: [AuthGuard],
        data: {
            animation: 'SecondPage'
        },
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RoutingModule { }