Tengo un componente Pregunta.

En app-routing.module.ts

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

Hay 3 preguntas en cada capítulo, y hay 4 capítulos. Tengo una API que crea direcciones URL para cada pregunta.

capítulo1/pregunta1, capítulo1/pregunta2, etc.

Necesito las preguntas para animar entre unos y otros. Pero es solo un corte difícil en este momento. Los datos se intercambian pero las animaciones no se activan.

En un archivo de transiciones agregué:

 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 })) ]), ]) ]),

Pero no se activa. Intenté agregar animaciones al componente Pregunta en sí.

 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)' })) ]) ])

Y luego en question.component.html

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

Pero eso tampoco se activa cuando se enruta entre las páginas de preguntas.

También intenté agregar una estrategia de reutilización de rutas, pero la única vez que lo hice funcionar fue animado pero no lo enrutó básicamente solo lo enrutó a la misma página, por ejemplo, capítulo1/pregunta1 -> capítulo1/pregunta1

Cualquier ayuda sería increíble, gracias!