Angular 2 - css Übergang auf Element mit ngstyle

Question

Ich kann nicht meinen CSS-Übergang arbeiten, wenn die Eigenschaft aktualisiert werden soll, binden mit [ngstyle] oder [style.property]

HTML:

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

CSS:

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

JS: Größe korrekt aktualisiert ...

Um sicher zu sein, wenn i-ten entfernen e style bindet in html und aktualisiert die Breite auf: hover, transition funktioniert. Vermisse ich etwas?

Wenn ich die [style.width] -Bindung machen und es für ex. mit einer Breite: 50%! wichtig, der Übergang funktioniert. Auch wenn es nicht das ist, was ich erreichen möchte, sieht es so aus, als ob ngStyle die Übergänge blockiert. Und! Wichtig ist erforderlich.

Aber das funktioniert nicht entweder:

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

Answer 1

mit diesem Setup haben Sie die Bindung von variabler Größe zu verzögern,

export class AppComponent{ 

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

}