Angular Универсальный SSR CSS Ошибка преобразования анимации - PullRequest
Новая
       66

Angular Универсальный SSR CSS Ошибка преобразования анимации

1 голос
/ 28 января 2020

Я добавил Angular универсальный для моего приложения и следовал руководству на https://angular.io/guide/universal Это было очень просто, я просто борюсь с этой ошибкой:

Ошибка: Невозможно создать анимацию из-за следующих ошибок: Предоставленное свойство анимации "transform" не поддерживается CSS свойство для анимаций. Предоставленное свойство анимации "transform" не поддерживается CSS свойство для анимаций

* 1007. * Причиной этого является простая кнопка с анимацией ключевых кадров, которая использует transform: rotate (0deg); Кнопка круглая и катится справа налево после загрузки.

Есть ли обходной путь для решения этой проблемы? Я уверен, что transform - это вполне допустимое свойство CSS для анимации.

Edit : я использую свойство transform внутри файла s css компонентов. Контент stati c, а компонент показывает весь сайт. Код css выглядит следующим образом: 

  .roll-in {  animation: 2s linear 0s 1 animation;
    animation-fill-mode: both;
    }
@keyframes animation {
  0% {
    left: 110%;
  }

  10% {
    transform: rotate(0deg);
    left: 110%;
  }

  100% {
    transform: rotate(-720deg);
    left: 0px;
  }
}

После запуска приложения с serve: ssr элемент не имеет атрибута анимации.

1 Ответ

1 голос
/ 28 января 2020

Я думаю, это происходит, когда анимация запускается на стороне сервера. Так как это SSR , нет смысла загружать анимации на серверной версии.

Загружать анимацию только в версии Browser platform. Итак, анимация начнется только после того, как страница будет отображена в браузере. Например,

component.ts 

import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'my-animated-component',
  templateUrl: './my-animated-component.html'
})
export class MyAnimatedComponent{
  isBrowser: boolean;

  constructor( @Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
}

В разметке 

 <div *ngIf="isBrowser">
    <my-animated-component></my-animated-component>
 </div>

Рекомендуется использовать Angular родные анимации, а не CSS анимации. Рабочий пример здесь: https://stackblitz.com/edit/angular-animate-keyframes

...