Angular 动画在 IE edge 中不工作

Question

我在 Angular 中为我的组件添加了一个动画。然而，动画在 Chrome 和 Firefox 中运行良好，但在 IE Edge 中，虽然样式在状态更改时正确应用，但没有指定动画，但动画未触发。

有人遇到同样的问题吗？

这是我的代码：

animations: [
    trigger('rowState', [
        state('collapsed', style({
            'height': 0,
            'overflow-y': 'hidden'
        })),
        state('expanded', style({
            'height': '*',
            'overflow-y': 'hidden'
        })),
        transition('collapsed <=> expanded', [animate('1000ms ease-out')])
    ])
]

提前致谢

Answer 1

edge, you should add the polyfill

不支持 Web 动画

Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it. For other browsers, a polyfill is required. Grab web-animations.min.js from GitHub and add it to your page.

Answer 2

您需要在 polyfills.ts

中添加 polyfill

从

删除评论

import web-animations-js;

然后运行

npm install --save web-animations-js

Angular 动画在 IE edge 中不工作

Angular animation not working in IE edge

microsoft-edge

angular

angular-animations