使用ngStyle在元素上进行角度2 - css转换

Question

当要更新的属性与[ngStyle]或[style.property]

绑定时，我无法使css过渡工作

HTML：

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

CSS：

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

JS：大小正确更新......

可以肯定的是，如果我删除html中的样式绑定并更新宽度：hover，则转换正在运行。我错过了什么吗？

如果我让[style.width]绑定并将其悬停在前面。宽度：50％！重要的是，过渡工作。即使它不是我想要实现的，它看起来像ngStyle阻止过渡。并且！重要是必需的。

但这也不起作用：

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

Answer 1

使用此设置，您必须延迟大小变量的绑定，

export class AppComponent{

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

}