Angular Animations not triggering using 'void => * or '*=> void'

Question

I have been trying to get angular animations to work with routes,so angular route transition animations. When using transition('* => *')... the code executes, but while trying to get 'void => *' or vice versa, the code does not work at all. No animations take place. Please Help!

My app.component.ts is:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [getRoutingTrigger()]
})
export class AppComponent {
  title = 'screen-transition';
  in = "in";
  getRoutingState(outlet: RouterOutlet): string {
    console.log( outlet.activatedRouteData.state);
    return outlet.activatedRouteData.state;
  }
}

My html file is:

<div class = "main">
    <a class="btn btn-info my-1" routerLink="/routeToComponent">Route To Component</a>
    <a class="btn btn-info my-1" routerLink="/secondRoute">Second Route</a>
    <a class="btn btn-info my-1" routerLink="/thirdRoute">Third Route</a>
    <a class ="btn btn-info my-1" routerLink="/firstRoute">FirstRoute</a>

    <div [@routing]="getRoutingState(outlet)" class="main-container">
        <router-outlet #outlet="outlet"></router-outlet>
    </div>
    <div style="background-color: brown" class="my-3">
    </div>
</div>

My router.module.ts is

const routes: Routes = [
    {path: 'routeToComponent' , component: RouteToComponent, data: {state: 'routeToComponent'}},
    {path: 'secondRoute', component: SecondRouteComponent, data: {state: 'secondRoute'}},
    {path: 'thirdRoute', component: ThirdRouteComponent, data: {state: 'thirdRoute'}},
    {path: 'firstRoute', component: FirstComponent, data: {state: 'firstRoute'}}
  ];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule{}

And my animations file is:

import {
trigger,
animate,
transition,
style,
query,
group,
useAnimation,
animation,
AnimationTriggerMetadata,
state
} from '@angular/animations';

const commonStyles = {
  position: 'absolute',
  width: '100%'
};
const slideBackwards = animation([
  query(':leave', [
      style([commonStyles, { transform: 'translateX(0%)' }])
  ], { optional: true }),
  query(':enter', [
      style([commonStyles, { transform: 'translateX(-200%)' }])
  ], { optional: true }),
  group([
      query(':leave', [
          animate('1000ms ease-out',
              style({ transform: 'translateX(200%)' })
          )
      ], { optional: true }),
      query(':enter', [
          animate('1000ms ease-out',
              style({ transform: 'translateX(0%)' }))
      ], { optional: true })
  ])
]);

const slideForward = animation([
  query(':leave', [
      style([commonStyles, { transform: 'translateX(0%)' }])
  ], { optional: true }),
  query(':enter', [
      style([commonStyles, { transform: 'translateX(200%)' }])
  ], { optional: true }),
  group([
      query(':leave', [
          animate('1000ms ease-in-out',
              style({ transform: 'translateX(-200%)' })
          )
      ], { optional: true }),
      query(':enter', [
          animate('1000ms ease-in-out',
              style({ transform: 'translateX(0%)' }))
      ], { optional: true })
  ])
]);

export function getRoutingTrigger(): AnimationTriggerMetadata {

  return trigger('routing', [
    transition("void => *", [useAnimation(slideForward)]),//doesnt work

    transition('* => void', [useAnimation(slideBackwards)]),//doesnt work

    transition('* => *', [useAnimation(slideBackwards)])//only the one that works.
    //if i remove the last one nothing happens 

  ]);
}