内的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初始初始化动画。