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

export let slideAnimation = trigger('slide', [
    transition('* => *', [
        style({transform: 'translateX(-100%)'}),
        animate('150ms ease-in', style({transform: 'translateX(0%)'}))
    ]) 
  ])
import { trigger, state, transition, animate, style } from '@angular/animations';

export let slideAnimation = trigger('slide', [

    // state('left', style({ transform: 'translateX(0)' })),
    // state('right', style({ transform: 'translateX(-50%)' })),
    transition('* => *', [
      style({ transform: 'translateX(0)'}),
      animate(300, style({ transform: 'translateX(-50%)' }))
    ]) 
  ])
--- 
+++ 
@@ -1,11 +1,8 @@
 import { trigger, state, transition, animate, style } from '@angular/animations';
 
 export let slideAnimation = trigger('slide', [
-
-    // state('left', style({ transform: 'translateX(0)' })),
-    // state('right', style({ transform: 'translateX(-50%)' })),
     transition('* => *', [
-      style({ transform: 'translateX(0)'}),
-      animate(300, style({ transform: 'translateX(-50%)' }))
+        style({transform: 'translateX(-100%)'}),
+        animate('150ms ease-in', style({transform: 'translateX(0%)'}))
     ]) 
   ])
Change animation on tab switching.
