After installing an animation module then you create an animation file inside your app folder.
router.animation.ts
import { animate, state, style, transition, trigger } from '@angular/animations';
export function routerTransition() {
return slideToTop();
}
export function slideToRight() {
return trigger('routerTransition', [
state('void', style({})),
state('*', style({})),
transition(':enter', [
style({ transform: 'translateX(-100%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
]),
transition(':leave', [
style({ transform: 'translateX(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
])
]);
}
export function slideToLeft() {
return trigger('routerTransition', [
state('void', style({})),
state('*', style({})),
transition(':enter', [
style({ transform: 'translateX(100%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
]),
transition(':leave', [
style({ transform: 'translateX(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
])
]);
}
export function slideToBottom() {
return trigger('routerTransition', [
state('void', style({})),
state('*', style({})),
transition(':enter', [
style({ transform: 'translateY(-100%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
]),
transition(':leave', [
style({ transform: 'translateY(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))
])
]);
}
export function slideToTop() {
return trigger('routerTransition', [
state('void', style({})),
state('*', style({})),
transition(':enter', [
style({ transform: 'translateY(100%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
]),
transition(':leave', [
style({ transform: 'translateY(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
])
]);
}
Then you import this animation file to your any component.
In your component.ts file
import { routerTransition } from '../../router.animations';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
animations: [routerTransition()]
})
Don't forget to import animation in your app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';