CODEWITHSUNDEEP
angularangular2-routingangular-animations
tiagor87
tiagor87

Reputation: 15

Angular 4 Routing Change Animation

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.

Upvotes: 0

Views: 3049

Answers (1)

Murhaf Sousli
Murhaf Sousli

Reputation: 13296

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

}

Upvotes: 1

Related Questions