Блог

У меня есть элемент, который принимает стиль ng, но стили не всегда применяются должным образом при изменении объекта стиля. Я специально ссылаюсь на css animation ниже, но я видел подобное поведение с background .

 <div [ngStyle]="_innerStyle">
  

 export class WidgetContainerComponent implements OnInit {
  _innerStyle?: {
    [klass: string]: any;
  } | null;
...
}
  

Например _innerStyle ,

 animation: "flash"
animation-duration: "1s"
animation-iteration-count: "infinite"
background-color: "#ffffff"
box-shadow: "0px 2px 1px -1px rgba(0,0,0,.2), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12)"
color: "#199719"
  

Результат в DOM:

 animation: 1s ease 0s infinite normal none running flash;
  

и изменения в

 animation: "rubberBand"
animation-duration: "1s"
animation-iteration-count: "infinite"
background-color: "#b53b3b"
box-shadow: "0px 2px 1px -1px rgba(0,0,0,.2), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12)"
color: "#199719"
  

Результат в DOM:

 0s ease 0s infinite normal none running flash
  

Почему animation-duration устанавливается 0s внезапно? Я печатаю объект JSON, и у него его нет 0s 1s .

Что еще более странно, если animation-duration это разные значения, они правильно применяются при изменении ?! Например: 1s to 2s вместо 1s to 1s

Я ожидаю, что стиль dom будет точно отражать объект стиля. Я делаю что-то не так ?! Есть ли способ отладить поведение ngStyles?

Я думаю, что это может быть связано с обнаружением изменений, когда Angular не срабатывает при обнаружении изменений, потому что ссылка (местоположение в памяти) _innerStyle не изменяется.

Каждый раз _innerStyle , когда в вашем TypeScript / JavaScript происходят изменения, попробуйте неизменно обновлять его следующим образом:

 this._innerStyle = {
   ...this._innerStyle, // keep all of the old properties (spread operator)
  color: 'red',         // change the properties here though
  'background-color': red,
};
  

Я начинаю понимать animation , что это сокращенное свойство.
Я действительно хотел использовать animation-name .

Если бы я должен был использовать animation в качестве свойства css, мне нужно было бы создать сокращенное значение.

При использовании отдельных свойств анимации анимация применяется правильно и не animation перезаписывается свойством shorthand .