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!