2

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!

randomuser12345
  • 61
  • 1
  • 1
  • 6
  • 1
    you importing BrowserAnimationsModule somewhere? – danday74 Sep 16 '21 at 05:19
  • Yep, I have all other animations working throughout the project. It's just the one's that route to the same component that don't work. – randomuser12345 Sep 16 '21 at 09:41
  • you can't animate between Question and Question because how can the animation know how to do an :enter and a :leave if they are both the same thing. What you need to do is re-assign the pages another value, like... previousQuestion <=> nextQuestion and then it will know which one is going :leave and which one will be using :enter – Zuriel Sep 25 '21 at 01:05

0 Answers0