內的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"; 
     } 
} 

Answer 1

不知道這是在未來打勾會觸發動畫最適當和優雅的解決方案，但改變state預期：

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

否則，this.state = "wided"種重新界定初始closed狀態和組件地沒有與wided初始初始化動畫。