角2 - 與ngStyle

Question

元素的CSS過渡，我不能讓我的CSS轉換時與[ngStyle]或[style.property]綁定要更新的屬性工作

HTML：

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

CSS：

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

JS：尺寸正確更新...

可以肯定，如果我刪除次e樣式在html中綁定並更新寬度：hover，轉換正在工作。我想念什麼？

如果我讓[style.width]綁定並將其懸停在前。寬度：50％！重要的，過渡作品。儘管它不是我想要實現的，但它看起來像ngStyle阻止了轉換。而！重要的是必需的。

但是這不工作之一：在此設置

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

Answer 1

，你不得不推遲大小可變的結合，

export class AppComponent{ 

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

}