Angular2アニメーションがAngular2アプリで

Question

を動作しません、私はここでアニメーション

を作成しようとしていることは、コンポーネントの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"; 
     } 
} 

Answer 1

ない予想通り、これはアニメーションをトリガーする次の目盛りで最も適切かつエレガントなソリューションが、変更stateであることを確認してください：

public ngOnInit(): any { 
    if (this.state == "closed") { 
    setTimeout(() => this.state = "wided") 
    } 
} 

そうでない場合は、this.state = "wided"は一種のclosed状態と部品がなくて初期としてwidedで初期化される初期の再定義アニメーション。