Angular 5+ animate flex在Firefox中不起作用

Question

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

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

在这里看到堆栈：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。