ngOnInit ignores CSS transition
<p>I have div which I would like to have its width increase from 0 - 100 in a 3s interval using CSS transition property. When I change this property in Chrome Developer tools, it grows nicely from 0-100 along the duration of the 3 seconds. However, if I apply the style from the component's <code>ngOnInit()</code>, it's instant. Am I doing something wrong?</p>

<p>EDIT: I did solve the problem by myself, however an answer which also explains why it works would be great.</p>

<p>Component.ts:</p>

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

export class NotFoundComponent {
    ngOnInit() {
        (&lt;HTMLElement&gt;document.querySelector('.determinate')).style.width = "100%";
    }
}
</code></pre>

<p>Component.html:</p>

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

&lt;style&gt;
    .progress {
        margin-top: 30px;
        background: white;
    }

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