Angular 5: Fade Animation During Routing (CSS)

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%;
}

Angular 4 Routing Change Animation

Add position: 'relative' on state('*',style({position: 'relative', opacity: 0 }))

import {trigger, state, animate, style, transition} from '@angular/animations';

export function fade() {
   return trigger('routerTransition', [ 
        state('void', style({position: 'fixed', opacity: 0 })), 
        state('*', style({position: 'relative', opacity: 0 })), 
        transition(':enter', [ style({opacity: 0}), animate('0.4s ease', style({opacity: 1})) ]), 
        transition(':leave', [ style({opacity: 1}), animate('0.4s ease', style({opacity: 0})) ])
   ]);
}

in your component

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['../vitrine.component.css', './home.component.css'],
  animations: [fade()]
})
export class HomeComponent {

  @HostBinding('@routerTransition') routerTransition;
  // ...

}

Fade animation between state transitions in ui-router

I've just posted a tutorial with a working demo showing how to do this using ngAnimate with CSS transitions.

There's a couple of transitions in the demo, this is the CSS snippet for fading in new views on the main element:

/* start 'enter' transition on main view */
main.ng-enter {
    /* transition on enter for .5s */
    transition: .5s;

    /* start with opacity 0 (invisible) */
    opacity: 0;
}

/* end 'enter' transition on main view */
main.ng-enter-active {
    /* end with opacity 1 (fade in) */
    opacity: 1;
}

There's only a transition on .ng-enter and not on .ng-leave, which causes the new view (that is entering) to fade in while the old view (that is leaving) disappears instantly without a transition.

Angular7 router-outlet animations skews and rearranges all elements making a mess

I figured out that :enter and :leave events close to routing can cause several issues with angular animation. This answer is not testet for your case and might needs to be adapted, because the following snippet depend on your application structure and your nested router. I will adapt this answer if it doesn't fit or solve your issue!

Regarding to this Github Issue child routes disappear immediately without playing animations when the parent route changes.

The following comment solved my issue but i had to adapt it for my environment:

let animation = [...]; // the metadata
transition('A => B', group([
  query(':self', animation),
  query('router-outlet ~ *', [style({}), animate(1, style({}))], { optional: true })
]))

That in fact means that you do not only animate your element. You also apply an animation to the router-outlet itself. It could be implemented for you code as the following:

query('mat-sidenav-content > router-outlet ~ *', [
  style({
  opacity: .99999
}),
animate(yourAnimationDuration, style({
  opacity: 1
}))
], { optional: true });

I am no Css-Selector professional you might need to adapt the

mat-sidenav-content > router-outlet ~ *

I hope this answer can help you :)

Transition expression when there is no previous route

I fixed it using :increment and :decrement which are not called upon using the direct url. Looks like this.

const routes: Routes = [
    {path: '', component: LoadingComponent, pathMatch: 'full', data: {i: -1}},
    {path: 'login', component: LoginComponent, data: {i: 0}},

    {path: 'client/:client/panel', component: ClientPanelComponent, canActivate: [AuthGuard], data: {i: 1}}
];

export const routerAnimation = trigger('routerTransition', [
    transition('-1 => *', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({opacity: 0}),
                    animate('300ms', style({opacity: 1}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({opacity: 1}),
                    animate('300ms', style({opacity: 0}))
                ],
                {optional: true}
            )
        ])
    ]),
    transition(':decrement', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({transform: 'translateX(-100%)'}),
                    animate('300ms ease-in', style({transform: 'translateX(0)'}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({transform: 'translateX(0)'}),
                    animate('300ms ease-in', style({transform: 'translateX(100%)'}))
                ],
                {optional: true}
            )
        ])
    ]),
    transition(':increment', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({transform: 'translateX(100%)'}),
                    animate('300ms ease-in', style({transform: 'translateX(0)'}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({transform: 'translateX(0)'}),
                    animate('300ms ease-in', style({transform: 'translateX(-100%)'}))
                ],
                {optional: true}
            )
        ])
    ]),
    transition('* <=> *', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({opacity: 0}),
                    animate('300ms', style({opacity: 1}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({opacity: 1}),
                    animate('300ms', style({opacity: 0}))
                ],
                {optional: true}
            )
        ])
    ])
]);

---

Related Topics