Question

如何使动画在浏览器上工作？特别是在@Component中使用主机后

这是我的menu.component.ts：

where

这是我的app.animation.ts：

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

我希望动画可以在浏览器上运行，但在使用主机后无法正常播放。

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 { }

我在@Component中遇到主机问题

1 个答案: