Angular 2 -在元素上使用ngStyle的css过渡

Question

当要更新的属性与[ngStyle]或[style.property]绑定时，我无法使我的css过渡工作

HTML:

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

CSS:

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

JS: size已正确更新…

可以肯定的是，如果我删除html中的样式绑定并更新:hover的宽度，过渡是工作的。我错过什么了吗?

如果我让[style。宽度]绑定和悬停它的宽度:50%的例子!重要的是，过渡是有效的。尽管这不是我想要实现的，但它看起来像ngStyle阻塞了过渡。重要是必需的。

但这也不工作:

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

Answer 1

使用这种设置，您必须延迟绑定size变量，

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