Angular 6 路由器过渡动画不起作用（导航栏）

Question

我正在尝试在我的路由器插座上实现淡入淡出过渡 - 每当您移动到一个页面时，您都会得到 fadein/out。

然而它似乎根本不起作用，路由器出口位于导航栏的主要区域： Stackblitz of my app

动画见"fadeIn.ts" 参见 "app.nav-component" html/ts 和用于实施的应用程序模块

我希望在导航中单击 link 时会触发过渡动画。

Answer 1

我稍微修改了你的 fadeIn.ts。

import {
    trigger,
    animate,
    transition,
    style,
    query, group
  } from '@angular/animations';

  export const fadeAnimation = trigger('fadeAnimation', [
    transition('* <=> *', [

        /* order */

        /* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%' })

          , { optional: true }),


        /* 2 */ group([  // block executes in parallel

          query(':enter', [

            style({ transform: 'translateX(100%)' }),

            animate('0.3s ease-in-out', style({ transform: 'translateX(0%)' }))

          ], { optional: true }),

          query(':leave', [

           style({ transform: 'translateX(0%)' }),

            animate('0.3s ease-in-out', style({ transform: 'translateX(-100%)' }
          ))], { optional: true }),         

        ])

      ])
  ]);

WORKING DEMO

Angular 6 路由器过渡动画不起作用（导航栏）

Angular 6 Router Transition Animation doesn't work (Nav bar)

javascript

typescript

angular-material

angular6

angular-animations