(Angular 6) Route transition animations does not work on children route

Question

I've to set a router animation to my router outlet. Actually what I want to animate is just one routing. This is my routing modules:

export class CustomReuseStrategy extends RouteReuseStrategy {
...
...
  public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return  curr.component ? (<any>curr.component).name !== 'CardDetailComponent' : true;
  }
}

const wallRoutes: Routes = [
  {
    path: 'wall',
    component: WrapperComponent,
    children: [
      { path: '', component: CardListComponent },
      {
        path: 'placeslist/:idPlacesList/details/:id',
        component: CardDetailComponent,
        canActivate: [CardDetailsGuard],
        data: {
          state: 'details',
          reuse: false
        }
      },
      {
        path: 'placeslist/:id',
        component: PlaceslistDetailComponent,
        canActivate: [PlacesListDetailsGuard],
        data: {
          reuse: true
        }
      },
      {
        path: 'details/:id',
        component: CardDetailComponent,
        canActivate: [CardDetailsGuard],
        data: {
          state: 'details',
          reuse: false
        }
      },
      {
        path: 'add/:title/:father',
        component: EntityAddComponent,
        canActivate: [EntityAddGuard],
        data: {
          reuse: true
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(wallRoutes)],
  exports: [RouterModule],
  providers: [CardDetailsGuard, EntityAddGuard, PlacesListDetailsGuard, { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }]
})

The animation is needed when routing between paths with state = "details". I've also implemented a custom reuse strategy, in order to re-init the component when the animation should fire.

Here's my animaton:

export const routeAnimations =
  trigger('routeAnimations', [
    transition('* <=> details', showDetailChildren('100%', '-100%') ),
  ]);


  function showDetailChildren(slideFrom: string, slideTo: string)
  {
    return[
        query(':enter, :leave', style({ position: 'fixed', width:'60%' }), { optional: true }), 
        group([  
          query(':enter', [
            style({ transform: 'translateY('+slideTo+')' }),
            animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
          ], { optional: true }),
          query(':leave', [
            style({ transform: 'translateY(0%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateY('+slideFrom+')' }))
          ],{ optional: true }),
        ]),
  ]  
}

And here my main component with the router outlet:

<main [@routeAnimations]="getState(o)">
<router-outlet #o="outlet"></router-outlet>
</main>

here the ts function:

  getState(outlet) {
    return outlet.activatedRouteData.state;
  }

Well, what happens is that the animation skip the ":leave" part of the animation on the exiting component, and it just disappear with few moments of a blank page and then the ":enter" animation of the new component appear.