Show angular animation in button click

Question

I want to trigger animation on button click

  animations: [
  trigger('simpleFadeAnimation', [
  state('in', style({opacity: 1})),
  transition(':enter', [
    style({opacity: 0}),
    animate(300 )
  ]),
  transition(':leave',
    animate(0, style({opacity: 0})))
])
],

Template

  <div class="flex-align h-100"   [@simpleFadeAnimation]>
  <div class="description">{{ screens[currentIndex].title }}</div>
  </div>

Now the animation is showing when the page loads, I want to show fadein animation each time "currentIndex" is changed

the :enter and :leave are special transitions that's mean when pass from not exist to exist and viceverse (generally using a *ngIf). In general in an Angular animation you defined the states and transitions are defined when pass from one state to another one — Eliseo
– Eliseo, Commented Apr 19, 2022 at 13:06

R3tep · Accepted Answer · 2022-04-19 12:59:15Z

You need to use two animation and switch animation in your component when currentIndex is updated.

I think the example below can help you

@Component({
  ...
  animations: [
    trigger('simpleFadeAnimation', [
      state('hidden', style({
        opacity: 0
      })),
      state('visible', style({
        opacity: 1
      })),
      transition('hidden <=> visible', [
        animate('0.3s ease')
      ])
    ])
  ]
})
export class AppComponent {
  currentState = 'hidden';
  currentIndex = 1;
  nextIndex = null;

  changeCurrentIndex() {
    this.currentState = 'hidden';
    this.nextIndex = 2;
  }

  animationFinished(event: AnimationEvent) {
    if (event.fromState === 'void' && event.toState === 'hidden') {
      this.currentState = 'visible';
    } else if (event.fromState === 'visible' && event.toState === 'hidden') {
      this.currentState = 'visible';
      this.currentIndex = this.nextIndex;
    }
  }
}

<div class="flex-align h-100" [@simpleFadeAnimation]="currentState" (@simpleFadeAnimation.done)="animationFinished($event)">
  <div class="description">{{ screens[currentIndex].title }}</div>
</div>

Collectives™ on Stack Overflow

Show angular animation in button click

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related