On Click fade-out and fade-in Animation Angular

Question

I implemented fade in fade out animation for a div element. what I want to do is something like this.

when page initial renders there is div element displaying some number.the right and left side i have two-buttons.
When a user clicks on one of those buttons I want to remove the numbers in div element and add display the newly created numbers in the div

my problem is when the user clicks on one of those button fade-out part of the animation working fade-in part is not working.

this is stackblitz example

user_6513921 · Answer

It is working as expected. You have two different states that are toggled when you click a button. In initial state, the opacity is 1 and the data is displayed. And in final state the opacity is 0. So the data isn't displayed until you switch to the initial state again.

To achieve your desired behavior, you could use only one state and use :enter and :leave transitions to toggle between the opacity. The following should do it.

Component

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
   animations:[
    trigger('fade', [
      state('in', style({ opacity: 1 })),
      transition(':enter', [ style({ opacity: 0 }), animate(600) ]),
      transition(':leave', animate(600, style({ opacity: 0 })))
    ])
  ]
})
export class AppComponent  {
  array = [0, 10, 20, 30, 50]

  goToPrevSet(){
    this.array = this.array.map(data => data - 5)
  }

  goToNextSet(){
    this.array = this.array.map(data => data + 5)
  }
}

Template


  
  
    {{item}}

Working example: Stackblitz

user_12673871 · Answer

You can do this using following simple step No need to use a function to do a small work which is easily possible with just a 1 line css.

Remove all animation code and comment out changeAnimationState() calling from ts

.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

{{item}}

On Click fade-out and fade-in Animation Angular

2 Answers