angular-animation-6.js

import { routerTransition } from 'router.animations'
...

@Component({
  selector: '...',
  styleUrls: ['...'],
  templateUrl: './app.template.html',
  animations: [routerTransition],
})
export class AppComponent {

  private previousPath: string = ''

  getPageTransition(routerOutlet: RouterOutlet) {
    if (routerOutlet.isActivated) {
      let transitionName = 'section'

      const { path } = routerOutlet.activatedRoute.routeConfig
      const isSame = this.previousPath === path
      const isBackward = this.previousPath.startsWith(path)
      const isForward = path.startsWith(this.previousPath)

      if (isSame) {
        transitionName = 'none'
      } else if (isBackward && isForward) {
        transitionName = 'initial'
      } else if (isBackward) {
        transitionName = 'backward'
      } else if (isForward) {
        transitionName = 'forward'
      }

      this.previousPath = path

      return transitionName
    }
  }

  ...
}