Angular应用中的过渡动画在EDGE中不起作用 [英] Transition animation in angular app does not work in EDGE

问题描述

我有一个简单的动画，当应用程序通过路由器导航到其他组件时会用到.

I have a simple animation that is used when the app navigates via router to a different component.

export function routerNavigation() {
  return trigger('routerNavigation', [
    state('void', style({ position: 'fixed' })),
    state('*', style({ position: 'fixed' })),
    transition(':enter', [
      style({ transform: 'translateY(200%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
    ]),
    transition(':leave', [
      style({ transform: 'translateX(0%)' }),
      animate('0.5s ease-in-out', style({ transform: 'translateX(150%)' }))
    ])
  ]);
}

动画将被添加到组件中，如下所示:

and the animation is added to the component like so:

@Component({
  selector: 'app-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.scss'],
  animations: [routerNavigation()],
  host: { '[@routerNavigation]': '' }
})

我已经跑步:

npm install --save web-animations-js`

并且我已经取消了对pollyfil.js文件中各行的注释:

and I have uncommented the lines in the pollyfil.js file:

import 'web-animations-js'; 

注意:

1. 这是一个有角度的7应用程序，在chrome中可以正常工作.
2. 动画在MS Edge中不起作用
3. 该组件永远不会添加到DOM中，但components.ts文件中的服务将被执行

我感觉这与转换有关:动画的'translateY(200％)'样式，但是我不确定如何调试它.

I have a feeling that this has to do with the transform: 'translateY(200%)' style for the animation but I am unsure how to debug this.

有人可以帮我弄清楚为什么我的动画不能在MS Edge中工作.

Can someone help me figure out why my animations don't work in MS Edge.

关于SO的所有其他类似问题都添加了用于Web动画的polyfill作为解决方案.我已经做到了，但仍然行不通.

All the other similar questions on SO have added the polyfill for web animations as the solution. I have already done that and it still does not work.

预先感谢

推荐答案

不幸的是，这是一个简单的CSS问题.

Unfortunately, this was a simple CSS problem.

路由器出口中呈现的所有组件都使用div包裹组件.我需要添加以下内容:

All of the components being rendered in the router outlet use a div to wrap the component. I needed to add the following:

位置:固定；

此后，动画开始工作.因此，这不是一个有角度的动画问题，而是一个CSS问题.

After this, the animations work. So it was not an angular animation issue but rather a CSS issue.

希望这对其他人有帮助

这篇关于Angular应用中的过渡动画在EDGE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！