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

Question

我是 Angular 动画系统的新手，我已经设法制作了一个漂亮而流畅的动画，它在 Chrome 上运行良好，但在 Firefox 上运行不佳，并生成了一个不刷新 View 的恼人错误。

当您从它触发的 cardAnimation 中删除 width、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