Angular 5：路由期间的淡入淡出动画（CSS）

Posted 2023-03-06

【中文标题】Angular 5：路由期间的淡入淡出动画（CSS）

【英文标题】：Angular 5: fade animation during routing (CSS)

【发布时间】：2018-05-28 02:32:53

【问题描述】：

我有 2 条路线：

export const appRoutes: Route[] = [

                path: 'page1',
                component: Page1Component,
                data: 
                    animation: 'page1'
                
            ,

                path: 'page2',
                component: Page2Component,
                data: 
                    animation: 'page2'
                
            ,
];

我的路线动画：

export const routeStateTrigger = trigger('routeState', [
    transition('* => *', [
        query(':enter', [
            style( position: 'absolute', opacity: 0 )
        ],  optional: true ),
        query(':leave', [
            animate(300, style( opacity: 0 ))
        ],  optional: true ),
        query(':enter', [
            style( position: 'relative', opacity: 0 ),
            animate(300, style( display: 'visible', opacity: 1 ))
        ],  optional: true )
    ])
]);

我的路由器插座：

<div [@routeState]="getAnimationData(routerOutlet)">
    <router-outlet #routerOutlet="outlet"></router-outlet>
</div>

和 getAnimationData 方法：

getAnimationData(routerOutlet: RouterOutlet) 
    const routeData = routerOutlet.activatedRouteData['animation'];
    return routeData ? routeData : 'rootPage';

这很好，除了页面转换发生在两个步骤中（顺序）：

page1 消失（300 毫秒） 然后第 2 页出现（300 毫秒）

我想要的是 page1 的消失应该在 page2 出现的同时发生，转换应该同时发生。

问题：

我想防止对 page1 或 page2 的内容进行临时调整大小。

说明：

当使用 group() 制作动画以使它们同时出现-消失并将位置临时设置为“绝对”时，内容会调整大小（因为内容的宽度为 100%，并且当容器大小发生变化时，内容也会发生变化） .

我试过玩 z-index ：

position: 'relative', 'z-index': 1

但这不起作用，它仍然在离开页面下方堆叠进入页面。

有什么好的解决办法吗？

【参考方案1】：

我只使用 CSS 在路由期间创建淡入淡出动画，如下所示：

@keyframes fade 
  0% 
    opacity: 0;
  
  100% 
    opacity: 1;
  


router-outlet + * 
  display: block;  /* Change display inline to block */
  animation: fade 1s;

注意：我使用全局样式，你可以使用更多的类来隔离。

【讨论】：

迄今为止最简单的为路线过渡添加淡入淡出动画的方法！赞一个！

【参考方案2】：

因为我使用的是页脚，所以绝对位置并不理想。这是我所做的：

// animation.ts
export const fadeAnimation =

  trigger('fadeAnimation', [

    transition('* => *', [

      query(':enter',
        [
          /* Modified the css here so to push the new element on top while its transitioning */
          style(opacity: 0, position: 'absolute', top: 0, left: 0, width: '100vw', background:'#fff', height: '100vh', 'z-index' : 10)
        ],
        optional: true
      ),

      query(':leave',
        [
          style(opacity: 1),
          animate('0.5s', style(opacity: 0))
        ],
        optional: true
      ),

      query(':enter',
        [
          style(opacity: 0),
          animate('0.5s', style(opacity: 1))
        ],
        optional: true
      )

    ])

  ]);

// mystyle.scsss
:host 

  main 
    position: relative;
  

【参考方案3】：

我终于成功了：

export const routeStateTrigger = trigger('routeState', [
    transition('* => *', [
        query(':enter', [
                style( opacity: 0 )
            ],  optional: true 
        ),
        group([
            query(':leave', [
                    animate(300, style( opacity: 0 ))
                ],
                 optional: true 
            ),
            query(':enter', [
                    style( opacity: 0 ),
                    animate(300, style( opacity: 1 ))
                ],
                 optional: true 
            )
        ])
    ])
]);

这个 CSS 选择器成功了：

/deep/ router-outlet~* 
    position: absolute;
    width: 100%;
    height: 100%;

【讨论】：

如果您使用的是position: absolute，您如何管理路由器出口后的页脚？由于两条路线的动态高度，我对此有疑问。

我不再使用这个解决方案了，我强烈推荐使用css grid。另外，我的应用没有固定页脚。

@IgnacioBustos 你能找到什么吗，因为这个 CSS 技巧也干扰了我的页脚。

有人能解决这个问题吗？

谢谢，成功了

【参考方案4】：

试试这个简单的过渡。

export const routeStateTrigger =
  // trigger name for attaching this animation to an element using the [@triggerName] syntax
  trigger('routeState', [

    // route 'enter and leave (<=>)' transition
    transition('*<=>*', [

      // css styles at start of transition
      style( opacity: 0 ),

      // animation and styles at end of transition
      animate('0.4s', style( opacity: 1 ))
    ]),
  ]);

【讨论】：

进入组件在0.4s内逐渐出现，离开组件完全消失，没有任何动画。

从昨天开始检查这个：***.com/a/47839496/8800147 这是路由期间的动画。它也使用 :enter，但它在离开组件进行导航时使用动画状态和 (@animation.done)。希望这会有所帮助