Angular 5+ 动画 flex 在 Firefox 中不工作

Question

我是 Angular 动画系统的新手，我已经设法制作了一个漂亮流畅的动画，在 Chrome 上工作得很好，但在 Firefox 上却不行，并生成了一个不刷新视图的恼人错误。

当您从它触发的 cardAnimation 中删除 width、flex 和 padding 时，也许有更好的方法来实现这一点。我需要一个数组上的这个动画，可以从中添加和删除项目。

此致。

Answer 1

如果您的代码确实使用了 AnimationBuilder，则取消注释 Angular CLI 生成的 polyfills.ts 文件中的 web-animations-js polyfill。

Answer 2

Firefox 和网络动画 api 在使用 css 速记时存在问题，例如margin、padding、border-width、flex 等。Firefox 由于某种原因无法计算这些简写的样式，并且后续无法设置动画。

解决方法是将动画使用的所有css简写展开，例如

padding: 0;

应该是

padding-top: 0;
padding-right: 0
padding-bottom: 0;
padding-left: 0;

因此，当在动画中扩展简写 padding 和 flex 时，它在 firefox 中运行良好。

Angular 5+ animate flex not working in Firefox