Angular Universal: избегайте перезапуска анимации CSS при замене DOM
У нас есть веб-страница, которая начинается с анимации: коара
Из соображений производительности и SEO мы обычно предварительно преобразовываем наши страницы в статический HTML с помощью Angular Universal.
Проблема здесь: анимация перезапускается, когда DOM заменяется кодом Angular. Есть ли способ избежать этого или подождать с заменой DOM, пока анимация не закончится (и не запускать ее снова)?
@Vingtoft Думаю, в конце концов мы удалили эту анимацию.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете добавить поддельного провайдера в свой app.module.ts, чтобы знать, где отображается компонент:
providers: [
{
provide: "isBrowser",
useValue: true,
},
],
и этот импорт на вашем app.server.module.ts
providers: [
{
provide: "isBrowser",
useValue: false,
},
],
Затем вы можете импортировать этого «провайдера» в свой компонент следующим образом:
constructor(@Inject("isBrowser") public enableAnimations: boolean) {}
Теперь вы можете отключить анимацию при загрузке компонента на стороне сервера и добавить анимацию на стороне клиента.
Однако это не решает следующие проблемы: запустите анимацию в предварительно обработанном HTML-коде, а затем не запускайте ее снова в HTML-коде, отображаемом на стороне клиента. Любые предложения для этого?
Вы нашли решение этой проблемы? У меня такая же проблема. Хороший сайт кстати :)