각도 2 - ngStyle

Question

와 요소에 CSS를 전환 나는 속성이 [ngStyle] 또는 [style.property]와 결합되어 업데이트 될 때 작업 내 CSS 전환을 할 수 없습니다

HTML :

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

CSS :

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

JS : 크기가 올바르게 업데이트 ... 내가 일을 제거하면

은 확실하게 HTML에서 e 스타일 바인딩을 사용하고 너비를 업데이트합니다. 마우스를 올리면 전환이 작동합니다. 내가 놓친 게 있니?

[style.width] 바인딩을 가져 와서 전치 번호로 가져 가면. 너비 : 50 %! 중요합니다. 전환 작업. 달성하고자하는 것이 아니지만 ngStyle이 전환을 차단하는 것처럼 보입니다. 그리고 중요한 것은 필수입니다.

그러나이 역시 작동하지 않습니다 :이 설정에

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

Answer 1

을, 당신은

export class AppComponent{ 

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

}