Угловые ключевые кадры CSS3 для анимации - PullRequest
Новая
       22

Угловые ключевые кадры CSS3 для анимации

0 голосов
/ 12 сентября 2018

В угловом проекте мы используем следующие свойства CSS (в таблицах стилей scss) для анимации элемента: 

@keyframes animationName {
  0% {
    y: 10
  }
  100% {
    y: 500;
  }
}

.svgRectangle {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: animationFirst;
  animation-duration: 0.8s;
}

Проблема: Хотя эти анимации очень хорошо работают на сервере devleopment (ng serve), они не работают при создании рабочей сборки проекта. Если посмотреть на источник страницы, ключевого кадра больше нет (свойства css есть).

После нескольких копаний и попыток, оказывается, что отключение aot и buildOptimizer (по умолчанию true) создаст сборку prod с работающими анимациями.

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

1 Ответ

0 голосов
/ 13 сентября 2018

Хорошо, после помещения операторов CSS в базовый файл scss я получил следующие ошибки при сборке производственной сборки:

ПРЕДУПРЕЖДЕНИЕ в неверном имени свойства 'y' в 2117: 4. Не обращая внимания.

Итак, проблема вполне очевидна, я изменил y на transforms и сборка сейчас запущена. Вероятно, я спрошу угловых ребят, возможно ли выдать эти предупреждения также, когда недопустимые свойства используются в файле стиля компонента.

...