我是 Angular 动画系统的新手,我已经设法制作了一个漂亮而流畅的动画,它在 Chrome 上运行良好,但在 Firefox 上运行不佳,并生成了一个不刷新 View 的恼人错误。
当您从它触发的 cardAnimation 中删除 width、flex 和 padding 时,也许有更好的方法来实现这一点。我需要一个可以在其中添加和删除元素的数组上的动画。
在此处查看堆栈:https://stackblitz.com/edit/angular-flex-animate-firefox
问候。
最佳答案
当使用 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
关于css - Angular 5+ animate flex 在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50253537/