0
335
Vistas¿Cómo puedo activar la animación de un componente en otro componente?
Hola a todos, tengo un componente de navegación superior que es responsable de mostrar y ocultar la navegación superior y tiene una buena animación deslizante. Quiero agregar una transición de página a mis rutas. mi routeroutlet se presenta en AppComponent
pero primero, quiero que mi componente de navegación superior se cierre primero y luego ocurra la transición de página. No sé cómo cerrar primero el componente de navegación superior y luego hacer la transición de página. Soy bastante nuevo en angular.
1 Respuestas
Responde la pregunta0
Una forma podría ser activar animaciones en el cambio de ruta. https://angular.io/guide/ruta-animaciones
Luego cronometrarlos con retrasos con stagger o delay . https://angular.io/api/animations/stagger https://angular.io/guide/animations#animation-metadata-duration-delay-and-easing
Imaginemos que el estado actual es así, que el usuario está en una ruta y se muestra top-nav-component .
La animación estaría siguiendo.
- 250 ms + 250 ms (500 ms) para abrir o cerrar
top-nav-componentanimado
animate('250ms', style({ height: '*' })), query('.menu-item', [ stagger(-50, [ animate('250ms ease', style({ opacity: 1, transform: 'none' })), ]), ])- Para el componente de cambio de ruta, proporcionamos una animación en la que 750 ms es el tiempo para reproducir la animación de cambio de ruta y 500 ms es el retraso (para esperar la animación
top-nav).
animate('750ms 500ms ease', style({ [direction]: '100%' })) 
Puede agregar un retraso más largo para una brecha más notable.
Ejemplo de trabajo: https://stackblitz.com/edit/angular-route-animations-bvhn4c?file=src%2Fapp%2Froute-animations.ts