Angular 4 Routing Change Animation

Question

I'm trying to do simple fade animation on route change, but it doesn't work.

My animation file it's like this:

export class RouterAnimations {
    static animate() {
        return trigger('routerTransition', [
            state('void', style({ opacity: 0 })),
            state('*', style({ opacity: 1 })),
            transition(':enter', [
                style({ opacity: 0 }),
                animate('0.4s ease')
            ]),
            transition(':leave', [
                style({ opacity: 1 }),
                animate('0.4s ease')
            ])
        ]);
    };
};

My component's like this:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['../vitrine.component.css', './home.component.css'],
  animations: [RouterAnimations.animate()]
})
export class HomeComponent implements OnInit {
  @HostBinding('@routerTransition')
  public routerTransition = true;

  constructor() { }

  ngOnInit() {
  }
}

I observed that if I put a position: fixed on states, it works, but when the animation is completed the view is fixed and the layout is broken in the application.

Murhaf Sousli · Accepted Answer · 2017-06-18T20:01:16.410

1

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;
  // ...

}

edited Jun 18 '17 at 20:01

answered Jun 18 '17 at 18:34

Murhaf Sousli

12,622
20
119
185

It didn't work. I changed the opacity in states and it worked, but the animation suddenly completes without wait the time configured. – tiagor87 Jun 18 '17 at 18:37
Try to move your home content to a child component and let HomeComponent to handle the animation only – Murhaf Sousli Jun 18 '17 at 18:42
Same problem, the animation stops suddenly. – tiagor87 Jun 18 '17 at 19:00
Where exactly is the problem? on enter or on leave? – Murhaf Sousli Jun 18 '17 at 19:01
@tiagor87 I update the answer, try the updated animation – Murhaf Sousli Jun 18 '17 at 19:05
I changed and almost worked. So I did a little change and worked better. 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})) ]) ]); – tiagor87 Jun 18 '17 at 19:14
1

Thankyou very much. – tiagor87 Jun 18 '17 at 19:58

Angular 4 Routing Change Animation

1 Answers1