我在Firefox（和Safari）上应用Angular动画时遇到问题。是的，我知道那里有很多答案，您可以简单地在web-animations-js中添加polyfills.ts来解决问题。不幸的是，对于我来说，它不起作用。对于您的上下文，这是我们正在使用的default-src 'self'; img-src: * CSP策略。
这是动画代码：
animations: [
trigger('toggleCommunicationPanel', [
state('close', style({
maxWidth: '64px',
width: '4vw'
})),
state('open', style({
width: '25vw',
minWidth: '480px'
})),
transition('open=>close', animate('250ms')),
transition('close=>open', animate('250ms'))
])
]
这是polyfills.ts的一部分
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
我已将Angular配置为extract scss到一个大的.css文件中（以避免CSP问题）。因为默认情况下，Angular CLI不会将您的样式提取到样式表文件中，而是使用<style>元素将样式注入到DOM中，这是针对每种组件样式完成的。因此，您最终会在<style>元素中有很多<head>元素。这当然违反了上面的CSP规则。
我注意到，在Chrome，IE和Edge中，动画的css可以按预期提取，因此可以正常工作。但是，在Firefox中，它是使用<style>元素注入的。
<style>@keyframes gen_css_kf_2 {
0% {
width: 492px;
min-Width: 0px;
max-Width: none;
}
100% {
width: 4vw;
min-Width: 0px;
max-Width: 64px;
}
}
</style>
所以我怀疑是因为这个原因，动画无法在Firefox上运行。解决方案可能是更改配置，以便Angular CLI将css提取为动画（即使我们使用的是Firefox或Safari）。
这是production的配置，您可以看到extractCss已打开。
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"es5": {
"tsConfig": "./tsconfig.es5.json"
}
}
目前，我看不到解决此问题的方法。唯一的解决方案是，如果CSP设置为禁止内联样式，则不使用Angular动画。只需将Angular动画代码转换为css并使用ngClass即可达到相同的效果。