animation Angular2 intérieur onInit ne fonctionne pas

Question

En application Angular2, je suis en train de faire une animation

Voici le code HTML de composant:

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

    </div> 

Voici l'animation:

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))]) 
    ] 

I Je vais triger cette animation lorsque la page est chargée:

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

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

      this.state="wided"; 
     } 
} 

Answer 1

Pas sûr que c'est la solution la plus appropriée et élégante mais en changeant state dans la prochaine tique déclenchera l'animation comme prévu:

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

Sinon, this.state = "wided" redéfinit sorte d'état initial closed et le composant obtient initialisés avec wided comme initiale sans animation.