I have a Question component.

In app-routing.module.ts

{ path: 'chapter1/:question', component: QuestionComponent, data: {animation: 'Question', question: true}, canActivate: [AuthGuard]},

There are 3 questions in each chapter, and there are 4 chapters. I have an api that creates urls for each question.

chapter1/question1, chapter1/question2, etc.

I need the questions to animate between each other. But it's just a hard cut right now. The data swaps out but the animations don't trigger.

In a transitions file I added:

transition('Question <=> Question', [
    group([ 
        query(':leave', [
            style({ transform: 'translateX(0%)', zIndex: 20 }),
        ]),
        query(':leave .character', [
            style({ transform: 'translateY(0%)', opacity: 1 }),
            animate('600ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: 'translateY(20%)', opacity: 0 }))
        ]),
        query(':leave .inner-section', [
            style({ transform: 'translateY(0%)', opacity: 1 }),
            animate('600ms 300ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: 'translateY(20%)', opacity: 0 }))
        ]),
        query(':leave .wave-front', [
            style({ transform: "translateX(0%)", opacity: 1 }),
            animate('600ms 600ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: "translateX(100%)" }))
        ]),
        query(':leave .wave-back', [
            style({ transform: "translateX(0%)", opacity: 1 }),
            animate('600ms 850ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: "translateX(100%)" }))
        ]),
    ]),
    group([
        query(':leave', [
            style({ transform: 'translateX(0%)', zIndex: 20 }),
            animate('0ms linear', style({ zIndex: -1 }))
        ]),
    ])
]),

But it isn't triggered. I've tried to add animations to the Question component itself.

trigger('fadeOutIn', [
  transition('void => *', [
    style({ opacity: 0, transform: 'translateY(50px)' }),
    animate('500ms 0.5s ease', style({ opacity: 1, transform: 'translateY(0px)' })),
  ]),
  transition('* => void', [
    animate('300ms ease', style({ opacity: 0, transform: 'translateY(50px)' }))
  ])
])

And then in question.component.html

<div class="inner-section" @fadeOutIn></div>

But that also doesn't trigger when routing between the question pages.

I've also tried adding a route reuse strategy, but the only time I got it working it animated but it didn't route it basically just routed to the same page e.g. chapter1/question1 -> chapter1/question1

Any help would be amazing, thanks!