ngOnInitはCSSトランジションを無視します

Question

CSSトランジションプロパティを使用して3秒間隔で0〜100の幅を拡大したいdivがあります。 Chromeデベロッパーツールでこのプロパティを変更すると、3秒間にわたって0〜100までうまく成長します。しかし、コンポーネントのngOnInit()からスタイルを適用すると、それは即座です。私は何か間違っているのですか？

編集：私は自分で問題を解決しましたが、なぜそれがうまくいくのか説明する答えは素晴らしいでしょう。

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

私は0msとsetTimeoutに呼び出しをラップすることによってそれを解決しました。どのような驚き。

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