Angular Universal: избегайте перезапуска CSS-анимации при замене DOM

Question

У нас есть веб-страница, которая начинается с анимации: coara

Из соображений производительности и SEO мы обычно предварительно визуализируем наши страницы в статический HTML с помощью Angular Universal.

Проблема здесь: анимация перезапускается, когда DOM заменяется угловым кодом. Есть ли способ избежать этого или подождать с заменой DOM, пока анимация не закончится (и не запустить ее снова)?

Answer 1

Вы можете добавить поддельного провайдера на свой app.module.ts, чтобы узнать, где отображается компонент:

 providers: [
    {
      provide: "isBrowser",
      useValue: true,
    },
  ],

, и этот импорт на вашем app.server.module.ts

 providers: [
    {
      provide: "isBrowser",
      useValue: false,
    },
  ],

Тогда выможете импортировать этого «провайдера» в ваш компонент следующим образом:

constructor(@Inject("isBrowser") public enableAnimations: boolean) {}

Теперь вы можете отключить анимацию, когда компонент загружается на стороне сервера, и добавить анимацию на стороне клиента.