У меня проблемы с хостом в @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 { }