Angular 5+ animate flex在Firefox

Question

我对Angular动画系统很陌生，而且我设法制作了一个漂亮而流畅的动画，在Chrome上运行得很好，但是并没有在Firefox上生成一个令人烦恼的错误。 ＃39;刷新视图。

当你从它触发的cardAnimation中移除宽度，弯曲和填充时，也许有更好的方法来实现这一点。我需要在一个可以添加和删除项目的数组上使用此动画。

请参阅此处的堆栈：https://stackblitz.com/edit/angular-flex-animate-firefox

问候。

Answer 1

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

解决方案是扩展动画使用的所有css速记，例如

padding: 0;

应该是

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

因此，在动画中扩展简写padding和flex时，它在Firefox中效果很好。

在这里查看您的代码：https://stackblitz.com/edit/angular-flex-animate-firefox-svrwtp

来源：https://github.com/angular/angular/issues/10420

Answer 2

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