Angular 5: fade animation during routing (CSS)
I finally made it work :
export const routeStateTrigger = trigger('routeState', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
], { optional: true }
),
group([
query(':leave', [
animate(300, style({ opacity: 0 }))
],
{ optional: true }
),
query(':enter', [
style({ opacity: 0 }),
animate(300, style({ opacity: 1 }))
],
{ optional: true }
)
])
])
]);
This CSS selector did the trick :
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
Try this simple transition.
export const routeStateTrigger =
// trigger name for attaching this animation to an element using the [@triggerName] syntax
trigger('routeState', [
// route 'enter and leave (<=>)' transition
transition('*<=>*', [
// css styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('0.4s', style({ opacity: 1 }))
]),
]);
I use CSS only to create fade animation during routing like this:
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
router-outlet + * {
display: block; /* Change display inline to block */
animation: fade 1s;
}
Note: I use global style, you can use more classes to isolate.