Переходы не отображаются должным образом при загрузке страницы

Question

У меня есть индикатор, который необходимо заполнить в соответствии с переменной, отправленной в html-файл.Чтобы сделать это, я установил начальное значение на ноль, например:

  transform:rotate(.0turn);
  transition: all 1.3s ease-in-out;

Всякий раз, когда HTML загружается (впервые или с f5), он делает странную анимацию, которую я 'Я хотел бы избежать, даже если я изменю используемый раздел (с боковой навигацией) и вернусь назад, анимация будет плавной и будет отображаться как надо.

[ngStyle]="{ 'transform': 'rotate(' + dashService.valor_radio + 'turn)' }">

Это часть, где я отправляю значение со страницы html в файл CSS.Каждый вопрос, который я гуглю, кажется противоположным, как избежать переходов при загрузке страницы.Как примечание: я не могу использовать JQuery

Answer 1

РЕШЕНИЕ. Очевидно, что после перехода «all» все мои параметры были переведены вместо «transform: rotate».Это было так же просто, как заменить «переход: все» на «переход: преобразовать»

Answer 2

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

В зависимости от того, чего вы хотите достичь, вы можете решить эту проблему с небольшой задержкой анимации:

transition: all 1.3s 100ms ease-in-out;
                      ^ delay

Ах, хорошо, на основании вашего комментария это звучит так, как будто этотакже анимация ширины и / или высоты контейнера при построении DOM.Попробуйте изменить transition: all на более конкретный атрибут, например transition: transform