I'm trying to animate route transitions in angular 4, the animation works when the page first loads, and on page refreshes, so I know the animation works, however not when I switch routes. what am I missing?
here is the code...
// component metadata
animations: [fadeInAnimation]
// tempalte
<div class="route-container" [@fadeInAnimation]>
<router-outlet></router-outlet>
</div>
// styles
.route-container {
position:relative;
}
.route-container>* {
display:block;
}
// animation
trigger('fadeInAnimation', [
// route 'enter' transition
transition(':enter', [
// css styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('6s cubic-bezier(.35,0,.25,1)', style({ opacity: 1 }))
]),
]);
Enable routing transition animationlink The Angular router comes with high-level animation functions that let you animate the transitions between views when a route changes. To produce an animation sequence when switching between routes, you need to define nested animation sequences.
Multiple Outlets And Auxiliary Routes # Angular Router supports multiple outlets in the same application. A component has one associated primary route and can have auxiliary routes. Auxiliary routes enable developers to navigate multiple routes at the same time.
In order to make sure routing animation proc on each route you will need to define transitions between each route. The following is an example that I use to create a drawer effect when transitioning between my 'home' route and my 'acct' route:
import { trigger, animate, style, group, query, transition } from '@angular/animations';
export const baseAnimation =
trigger('baseAnimation', [
transition('acct => home', [
query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ height: '*'})),
query('.acct', [
animate('300ms',
style({ height: 0 }))
])
]),
transition('home => acct', [
query(':enter, :leave',
style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':enter .acct', [
style({ height: 0 }),
animate('300ms', style({ height: '*' }))
])
])
])
Note that .acct
refers to a class label for the account page route, and may not be necessary for your application (or may need to be changed accordingly). In this manner you can animate sub-elements of each route on route changes.
I use a function in my app.component.html to process route animations:
<div [@baseAnimation]="prepareRouteTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
</div>
And the app.component.ts should load the animations and declare animations for the route:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { baseAnimation } from './anim/base.animation';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [ baseAnimation ]
})
export class AppComponent {
constructor() { }
prepareRouteTransition(outlet) {
const animation = outlet.activatedRouteData['animation'] || {};
return animation['value'] || null;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With