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';
注意:
- 这是一个有角度的7应用程序,在chrome中可以正常工作.
- 动画在MS Edge中不起作用
- 该组件永远不会添加到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屋!