ngOnInit ignoriert CSS-Übergang

Question

Ich habe div, die ich möchte, um seine Breite von 0 bis 100 in einem 3s-Intervall mit CSS-Übergangseigenschaft zu erhöhen. Wenn ich diese Eigenschaft in den Chrome-Entwicklertools ändere, wird sie während der Dauer von 3 Sekunden von 0 bis 100 erweitert. Wenn ich jedoch den Stil von ngOnInit() der Komponente anwende, ist es sofort. Mache ich etwas falsch?

EDIT: Ich habe das Problem selbst gelöst, aber eine Antwort, die auch erklärt, warum es funktioniert, wäre toll.

Component.ts:

@Component({ 
    selector: 'notFound', 
    templateUrl: 'app/notFound.component/notFound.component.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class NotFoundComponent { 
    ngOnInit() { 
     (<HTMLElement>document.querySelector('.determinate')).style.width = "100%"; 
    } 
} 

Component.html:

<div class="wrapper"> 
    <i class="material-icons error">error_outline</i> 
    <div class="not-found-text"> No such page 'round here.</div> 
    <a [routerLink]="['Menu']" class="waves-effect waves-light btn blue"> 
     <i class="material-icons">home</i> 
     <!--home--> 
    </a> 
    <div class="progress"> 
     <div class="determinate"></div> 
    </div> 
</div> 

<style> 
    .progress { 
     margin-top: 30px; 
     background: white; 
    } 

    .determinate { 
     width: 0%; 
     background: #2196F3; 
     transition: width 3s ease-in-out; 
    }   
</style> 

Answer 1

Ich löste es durch den Anruf in einer 0ms setTimeout wickeln. Was für eine Überraschung.

ngOnInit() { 
    setTimeout(function() { 
     (<HTMLElement>document.querySelector('.determinate')).style.width = "100%"; 
    }, 0); 
}