Search code examples
angularangular-animations

Angular - Animate on page load

I am trying to create an animation in which the top div slides out revealing the contents of the page underneath. Following is my animations

animations: [
   trigger("myAnimationTrigger", [
      transition('void => *', [
       style({ transform: 'translateY(0%)'}),
       animate('1500ms',style({transform: 'translateY(100%)', display:'none', opacity: 0}))
     ]),
   ])
]

Currently the animation takes place but the red div comes back. I thought using displaying none would make it disappear at the end of animation. Secondly if I wanted the animation to reveal the page by rolling the div up what would be the transformation for that?

Stackblitz link

Solution

  • I would do as in the angular docs in Defining animations and attaching them to the HTML template and set different states on the animation (shown and hidden in this case) and the transition from shown to hidden:

    animations: [
  trigger("myAnimationTrigger", [
    state('shown', style({
      transform: 'translateY(0%)'})
    ), state('hidden', style({
      transform: 'translateY(100%)', display:'none', opacity: 0})
    ), transition('shown => hidden', [
      animate('0.5s')
    ]),
  ])
]

    Then, set a variable in your component to save the current state:

    state = 'shown';

    And change this variable of state after the component is loaded in AfterViewInit:

    ngAfterViewInit() {
  setTimeout( () => {
    this.state = 'hidden';
  }, 200);
}

    This variable is used in the template triggering the animation:

    [@myAnimationTrigger]="state"

    And you can see the final result on this stackblitz link.

    The animation will be done only the first time when ngAfterViewInit() is executed and state property changes from 'shown' to 'hidden'.