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.