0
337
Viewshow can i trigger animation of a component in another component
Hello everyone I have a top-nav-component that is responsible for showing and hiding top navigation and it has a nice slide-in-out animation I want to add page transition to my routes. my routeroutlet is presented in AppComponent
but first, I want my top-nav-component to close first and then page transition happens I don't know how to first close top-nav-component and then do the page transition I am pretty new to angular
1 answers
Answer question0
One way could be trigger animations on route change. https://angular.io/guide/route-animations
Then time them with delays with stagger or delay. https://angular.io/api/animations/stagger https://angular.io/guide/animations#animation-metadata-duration-delay-and-easing
Let us imagine that current state is so, that user is on a route and top-nav-component is showing.
Animation would be following.
- 250ms + 250ms (500ms) to open or close animate
top-nav-component
animate('250ms', style({ height: '*' })),
query('.menu-item', [
stagger(-50, [
animate('250ms ease', style({ opacity: 1, transform: 'none' })),
]),
])
- For the component on route change we give animation where 750ms is time to play route change animation and 500ms is the delay (to wait for
top-navanimation).
animate('750ms 500ms ease', style({ [direction]: '100%' }))
You can add longer delay for a more noticeable gap.
Working example: https://stackblitz.com/edit/angular-route-animations-bvhn4c?file=src%2Fapp%2Froute-animations.ts