Угловой 2 - CSS переход на элементе с ngStyle

Question

Я не могу заставить мой css переход работать, когда свойство, которое нужно обновить, связывается с [ngStyle] или [style.property]

HTML:

<div class="bar" [style.width]="size +'%'"></div>

CSS:

.bar{ width:0; transition: width .5s ease-out; }

JS: размер правильно обновлен...

Чтобы быть уверенным, если я удаляю привязку стиля в HTML и обновляю ширину на: hover, переход работает. Я что-то пропустил?

Если я позволю привязку [style.width] и наведите его на ex. с шириной: 50%! важно, переход работает. Хотя это не то, чего я хочу достичь, похоже, что ngStyle блокирует переходы. И! Важно обязательно.

Но это тоже не работает:

[ngStyle]="{'width': size +'% !important'}"

Answer 1

С этой настройкой вы должны отложить привязку переменной размера,

export class AppComponent{

  constructor(){
     setTimeout(()=>{
        this.size=20;
     },1000)
  }

}