У меня проблема с применением Angular анимаций на Firefox (и Safari). Да, я знаю, что есть много ответов о том, что вы можете просто добавить web-animations-js в polyfills.ts, и это должно сработать. К сожалению, это не работает в моем случае. Для вашего контекста это политика CSP, которую мы используем default-src 'self'; img-src: *.
Это код анимации:
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 не будет извлекать ваши стили в файл таблицы стилей, вместо этого он будет внедрять стили в DOM, используя элемент <style>, это делается для каждого стиля компонента. Следовательно, у вас будет много элементов <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"
}
}