How to trigger an animation just after the element has been rendered in Angular 2+

Question

It's incredible how Angular make simple tasks be not intuitive to implement, it reminds me of ASP.NET Web Forms. Terrible déjà vu.

How can I execute this animation just after the element appears on the page?

import { trigger, transition, style, state, animate} from '@angular/core';

export const AnimacaoCadastroImovelPassoDois = trigger("animarPasso" ,[


state("inicial", style({

     width: "0%",
     border: "3px solid black"

} ) ),

state("final", style({

   width: "25%",
   border: "3px solid blue"

}) ),

  transition("inicial => final", animate("800ms"))

]);

I don't see how I can cause a change of state in the application just after the element appears on the page without the console complaining of "something wrong".

  <div [@animarPasso]="passo" class="passo"></div>

Component definition:

  passo:string = "inicial";

  ngAfterViewInit()
  {
     this.animarPasso();
  }

  animarPasso() : void
  {
       this.passo = "final"; // this is a crime, I cannot do this
  }

This also doesn't work, the component starts in the "final" state:

   <div [@animarPasso]="change()" class="passo"></div>


 ngAfterViewInit()
 {
     this.change();
 }

 change() : string
 { 
      return "final";
 }

I searched all the web, there's no example of executing an animation just after the element has been rendered. — Diego Alves, Feb 09 '18 at 20:45

score 1 · Answer 1 · answered Feb 09 '18 at 21:50

Have a closer look at the void state https://angular.io/guide/animations#the-void-state

Add a new transition from void (entering the view) to your final state.

transition('void => final', [
  style({
    with:'0%',
    border: '3px solid black'
  }),
  animate('80ms ease-in')
]),

How to trigger an animation just after the element has been rendered in Angular 2+

1 Answers1