角度动画和子动画存在问题

Question

我目前正在玩Angular动画和子动画，因此我可能会走错路。在更改路线时，我想在页面本身内部触发子动画。这就是为什么我在组件内部创建了路线动画和另一个动画的原因。

无论如何都无法正常工作-甚至可能吗？正确的方法是什么？

route-animations.ts：

export const toProject =
  trigger('routeAnimations', [
      transition('isLeft => isLeft', [
        query(':enter', animateChild()),
        group([
          query('@animateChild', animateChild(), {optional: true}),
          query('@animateChild', animateChild())
        ]),
      ]),
    ],
  );

component.ts：

@Component({
  selector: 'app-main-horizontal-slider',
  templateUrl: './main-horizontal-slider.component.html',
  styleUrls: ['./main-horizontal-slider.component.scss'],
  animations: [
    trigger('childAnimation', [
      transition('isLeft => isLeft', [
        query(':enter, :leave', [
          style({
            position: 'fixed',
            minWidth: 'calc(55vh*21/29.7)',
            minHeight: '55vh',
            height: 'auto',
            left: '20px',
            top: '{{top}}px'
          })
        ], {optional: true}),
        query(':enter', [
          style({
            transform: 'matrix(1,0,0,1,{{x}},{{y}})'
          })
        ]),
        group([
          query(':leave', [
            animate('600ms ease', style({
              transform: 'matrix(1,0,0,1,{{x}},{{y}})'
            }))
          ], {optional: true}),
          query(':enter', [
            animate('600ms ease', style({
              transform: 'matrix(1,0,0,1,0,0)'
            }))
          ])
        ]),
      ]),
    ])
  ]
})

component.html：

<img [src]="cart.image" alt="Image" class="coverflow-image-bg" [@childAnimation]>

路由：

<div [@routeAnimations]="prepareRoute(outlet)" class="content">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

const routes: Routes = [
  { path: '', component: HomeComponent, data: { animation: 'isLeft' } },
  { path: 'project/:title', component: ProjectComponent, data: { animation: 'isLeft' } },
  { path: 'about', component: AboutComponent, data: { animation: 'isRight' } }
];