角度动画在 IE 边缘不起作用

Posted 2023-03-06

【中文标题】角度动画在 IE 边缘不起作用

【英文标题】：Angular animation not working in IE edge

【发布时间】：2017-11-20 14:49:16

【问题描述】：

我在 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')])
    ])
]

提前致谢

【参考方案1】：

你需要在 polyfills.ts 中添加 polyfill

从中移除 cmets

import web-animations-js;

然后运行

npm install --save web-animations-js

【参考方案2】：

edge不支持网页动画，你应该添加polyfill

Angular 动画构建在标准 Web 动画 API 之上，并在支持它的浏览器上原生运行。 对于其他浏览器，需要使用 polyfill。从 GitHub 获取 web-animations.min.js 并将其添加到您的页面。

【讨论】：

如果您使用 angular-cli，polyfills 会被烘焙到配置中，您只需通过取消注释来启用它们。 “polyfills.ts”

对于较新版本的 Angular 不再适用。仅当您在应用中使用 AnimationBuilder 时才需要这样做。