-1

I have an Angular application where I have a few components I want to use a button to show/hide.

So I have:

<div id="buttons">
 <button (click)="changeIndex(0)">Comp1</ion-button>
 <button (click)="changeIndex(1)">Comp2</ion-button>
 <button (click)="changeIndex(2)">Comp3</ion-button>
</div>

<div class="component-container">
 <app-comp1 style="display: block" *ngIf="index===0"  
    [@slideInOut]="direction">
 </app-comp1>    
 <app-comp2 style="display: block" *ngIf="index===1" 
    [@slideInOut]="direction">
 </app-comp2>        
 <app-comp3 style="display: block" *ngIf="index===2" 
    [@slideInOut]="direction">
 </app-comp3>    

And in the TypeScript file I have

...
animations: [Animations.getSlideInOut()]  //. See below -
..

public changeIndex(i: number): void {
  this.direction = i > this.index ? 'left' : 'right';
  this.index = i;
}

Now, when then index goes up, I would like the animation to translate left, and when the index goes down, I would like to translate right.

So, I thought I could use the following animation:

   export class Animations {
     public static getSlideInOut(): AnimationTriggerMetadata {
        return trigger('slideInOut', [
            state('left', style({ transform: 'translateX(0)' })),
            state('right', style({ transform: 'translateX(0)' })),
            transition('right => left', [
                style({ transform: 'translateX(100%)' }),
                animate(500)
            ]),
            transition('left => right', [
              animate(500, style({ transform: 'translateX(-100%)' }))
            ]),
        ]);}
    }

But the animation does not work at all.

Only if I have the following:

 transition('void => *', [
    style({ transform: 'translateX(-100%)' }),
    animate(500)
  ]),
  transition('* => void', [
    animate(500, style({ transform: 'translateX(100%)' }))
  ])

does it animate, but only in the one direction.

So I would like to know what using the transition('right => 'left') and transition('left=> 'right') does not work, and how I can actually get this to reverse direction as I am trying to do.

halfer
  • 19,824
  • 17
  • 99
  • 186
peterc
  • 6,921
  • 9
  • 65
  • 131

1 Answers1

0

Dunno if you have some other error somewhere. I tried you animations and they worked. however i did change the way you write the animation.

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

export const getSlideInOut = trigger('slideInOut', [
    state('left', style({ transform: 'translateX(0)' })),
    state('right', style({ transform: 'translateX(0)' })),
    transition('right => left', [
        style({ transform: 'translateX(100%)' }),
        animate(500),
    ]),
    transition('left => right', [
        animate(500, style({ transform: 'translateX(-100%)' })),
    ]),
]);

I think the issue is that due to ngIf you elements disappear. So hence only your void animation works.

so we can modify you transistion yo use void to enter or exit

export const getSlideInOutVoid = trigger('slideInOut', [
  state('left', style({ transform: 'translateX(0)' })),
  state('right', style({ transform: 'translateX(0)' })),
  transition('right => void', [
    style({ transform: 'translateX(100%)' }),
    animate(500),
  ]),
  transition('void => right', [
    style({ transform: 'translateX(100%)' }),
    animate(500),
  ]),
  transition('left => void', [
    animate(500, style({ transform: 'translateX(-100%)' })),
  ]),
  transition('void => left', [
    animate(500, style({ transform: 'translateX(-100%)' })),
  ]),
]);

to use this method instead of getting from the class you just add them in like

animations: [getSlideInOutVoid] 

in your component

I don't promise you animations goes in the right direction, but atleast that enough to get them working with ngIf on the components.