angular - onInit 内の Angular2 アニメーションが機能しない

Question

Angular2アプリで、アニメーションを作ろうとしています

コンポーネントのhtmlは次のとおりです。

   <div  [@playBox]="state" id="toPlay" class="playBox rounded-box">

   </div>

アニメーションは次のとおりです。

animations:[
    trigger('playBox',[
            state('closed',style({
            width: '5%',
            backgroundColor:'red',
            transform:'translateX(0)'
          })),
          state('wided',style({
                width: '100%',
                border: '3px solid red',
                backgroundColor:'transparent'
          })),transition('closed => wided',animate(4000))])
  ]

ページが読み込まれたときに、このアニメーションをトリガーします。

export class AppComponent implements OnInit{
  state="closed";
 public ngOnInit(): any
 {

        if(this.state=="closed"){

            this.state="wided";
         }
}