从顶栏组件调用时，角度路线动画不起作用（错误：NG03402）

Question

我正在尝试按照角度动画指南（https://angular.io/guide/animations）在组件之间实现简单的动画过渡。这些是我在组件之间切换的动画：

动画.ts

export const slideInAnimation =
 trigger('routeAnimations', [
    transition('* <=> DetailsPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ], { optional: false }),
      query(':enter', [
        style({ left: '-100%' })
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%' }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
        ]),
      ]),
    ]),
    transition('* <=> *', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ], { optional: false }),
      query(':enter', [
        style({ left: '-100%' })
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('200ms ease-out', style({ left: '100%', opacity: 0 }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
        ]),
        query('@*', animateChild())
      ]),
    ])
  ]);

从未指定组件到“DetailsPage”组件的第一个转换有效，但从未指定组件到另一个组件的第二次转换不起作用。虽然到“DetailsPage”的路由是通过转换组件本身进行的，但其他组件之间的路由是通过顶栏组件进行的。我怀疑这就是问题所在。

电影.html

<a [title]="movie.name + ' details'" [routerLink]="['/media', movie.type, movie.id]" >

顶栏.html

        <div class="navbar-nav">
          <a class="nav-item nav-link-active" [routerLink]="['movie']" id="movie_link_button"
             routerLinkActive="active-link" href="#" >Movie</a>
          <a class="nav-item nav-link-active" [routerLink]="['game']" id="game_link_button"
             routerLinkActive="active-link" href="#" >Game</a>
          <a class="nav-item nav-link-active" [routerLink]="['show']" id="show_link_button"
             routerLinkActive="active-link" href="#" >Show</a>
        </div>

当我尝试在调试模式下触发动画时，多次收到以下错误：

Error: NG03402: Unable to process animations due to the following failed trigger transitions NG03505: @routeAnimations has failed due to: NG03014: `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.

当我添加

{ optional: true }

时，错误消息消失，但动画显然仍然不起作用。

Answer 1

我在我的移动应用程序（使用 Capacitor 创建）上遇到错误“NG03402”。在浏览器中我没有看到任何错误，仅在 Android Studio 中看到。我的路线过渡中有这个动画：

  transition('watchList => movieDetail', [
    style({ opacity: 0 }),
    // bug
    query(':enter', [animate(`${animationTime}ms ease-out`, style({ opacity: 1 }))]),
    // query(':leave', [animate(`${animationTime}ms ease-out`, style({ opacity: 0 }))]),
  ]),

如果没有

:leave

查询，我会收到错误“NG03402”。