Как предотвратить повторение CSS-анимации, когда угловая SSR запускает приложение

Question

Я построил посадочную площадку, используя Angular. Чтобы сделать его оптимизированным для SEO, мне нужно было предварительно его отобразить.

Целевая страница начинается с вводной анимации (с использованием CSS 'animation).

Когда я впервые загружаю страницу / полнуюперезагрузите, анимация запускается, и в середине приложение загружается, поэтому не перезапускает анимацию снова.

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

Я пытался решить эту проблему следующим образом:

1. Добавление initialNavigation вAppRoutingModule:

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled'})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Добавление TransferHttpCacheModule и BrowserTransferStateModule к AppModule и ServerTransferStateModule к AppServerModule.

Answer 1

Вы можете сделать это, но это может быть не тот ответ, который вы ищете.

Сначала давайте посмотрим, что происходит, когда приложение SSR Angular запускается в браузере:

1. Браузер получает страницу, отображаемую на стороне сервера. Отрисовывается HTML, включая вашу анимацию, и он начинает воспроизводиться. Затем в нижней части страницы анализируются теги угловых сценариев и начинается загрузка JS для приложения.

2. Во время загрузки приложения воспроизводится анимация.

3. Когда приложение загружается, оно загружается, а при загрузке снова воспроизводит весь DOM, включая анимацию . В ходе этого процесса старые анимированные элементы удаляются из DOM, а затем добавляются новые анимированные элементы. Анимация начинает воспроизводиться во второй раз.

Вы можете обойти это двумя способами:

• либо не запускайте анимацию до тех пор, покаприложение загружается на клиент (добавьте анимацию с помощью пользовательского класса при запуске приложения в браузере)

• или переместите анимацию за пределы приложения, вставьте ее вручную в index.html - таким образом, когда произойдет повторный рендеринг SSR, это не будет затронуто. (таким образом, вы не можете иметь элемент внутри ваших <app-root></app-root> элементов)

Надеюсь, это поможет!

Answer 2

Вы пытались сохранить любой признак начальной загрузки, например, с помощью файлов cookie, как было предложено.
А затем оберните анимированный элемент с помощью [@.disabled]="indication", он должен выглядеть следующим образом:

<div [@.disabled]="isInitialized">
    <div @someAnimation>
        ...
    </div>
</div>

Answer 3

Вы можете попробовать добавить куки через cookieService и проверить, существует ли куки. Потому что все куки загружаются на стороне клиента. Например:

this.cookieService.set('check', 'anyvalue');
if (this.cookieService.get('check')) {
 // Your logic
}