CODEWITHSUNDEEP
angularangular2-routingangular-animations
AngularM
AngularM

Reputation: 16628

Angular 4 - fade in view on route change using angular animations

Question: Angular 4 - fade in view on route change using angular animations

Problem:

Currently, the view fades in onload of the website but not when the routes change. I want the view to fade in always on route change as well.

This is my HTML: (possibly the issue is here???)

  <div class="page" [@fadeInTransition]>
    <router-outlet></router-outlet>
  </div>

This is my app component:

import { Component, HostBinding  } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { MetadataService } from 'ng2-metadata/index';

import { fadeAnimation } from "./animations/fade.animation";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  animations: [fadeAnimation()] 
})

export class AppComponent {
    @HostBinding('@fadeInTransition') fadeInTransition;

    constructor(private route: ActivatedRoute, private router: Router, private metadataService: MetadataService) {
    }
}

This is my animation (which I import):

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

export function fadeInAnimation() {
    return trigger('fadeInTransition', [
        transition(':enter', [
            style({ opacity: 0 }),
            animate('2s', style({ opacity: 1 }))
        ])
    ]);
}

Upvotes: 1

Views: 1240

Answers (1)

ttugates
ttugates

Reputation: 6291

This is not DRY but.. Add the following to every component works.

import { fadeAnimation } from "./animations/fade.animation";

@Component({
  selector: "app-some-other-component",      
  animations: [fadeAnimation()] 
})

@HostBinding('@fadeInTransition') fadeInTransition;

Upvotes: 1

Related Questions