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

Posted 2023-03-13

【中文标题】Angular 6 路由器过渡动画不起作用（导航栏）

【英文标题】：Angular 6 Router Transition Animation doesn't work (Nav bar)

【发布时间】：2019-02-20 12:12:18

【问题描述】：

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

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

查看动画的“fadeIn.ts” 参见“app.nav-component”html/ts 和应用模块实现

我希望点击导航中的链接时会触发过渡动画。

【参考方案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

【讨论】：

太棒了！ - 我将尝试将其修改为淡入淡出动画 - 如果这是唯一的问题，请告诉我我的 fadeIn.ts 文件中出了什么问题？

如果有人感兴趣，根本原因设置“样式（位置： - 它必须是固定位置