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.width] 绑定并将其悬停在前。宽度：50%！重要的是，过渡有效。尽管这不是我想要实现的，但看起来 ngStyle 会阻止转换。并且 !important 是必需的。

但这也不起作用：

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

Answer 1

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

export class AppComponent{

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

}