CODEWITHSUNDEEP
angularanimation
Neil S
Neil S

Reputation: 2304

Angular2 Animation Transitions only firing for some events

First off, here is a plunkr

This is forked from this page transition animation example

basically, I need to set custom states because I have different animations for different actions in the site (first load vs page transition in-app, for example). The component classes have the following code: (home and about are pretty much the same)

import { Component, OnDestroy } from '@angular/core';
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
import { Subscription } from 'rxjs';
import { routerTransition } from './router.animations';

@Component({
  selector: 'home',
  template: `<h1 [@routerTransition]="navState">Home</h1>`,
  animations: [routerTransition()]
})
export class Home implements OnDestroy{

  navState: string = 'start';
  subscribed: Subscription;
  constructor (private router: Router) {

    this.subscribed = router.events.subscribe((routerEvent) => { 

      console.log('routerEvent', routerEvent);

      if (routerEvent instanceof NavigationStart) {
        this.navState = 'start';
      }
      if (routerEvent instanceof NavigationEnd) {
        this.navState = 'end';
      }
    });
  }

  onDestroy () {

    if (this.subscribed) {
      this.subscribed.unsubscribe();
    }
  }
}

and the animation:

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

export function routerTransition() {
  return slideToRight();
}

function slideToRight() {
  return trigger('routerTransition', [
    state('start', style({position:'fixed', width:'100%'}) ),
    state('end', style({position:'fixed', width:'100%'}) ),
    transition('start => end', [
      style({transform: 'translateX(-100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition('end => start', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
    ])
  ]);
}

as you can see in the plunkr, the 'start => end' transition is fired and works properly. However, the reverse, 'end => start' is never fired.

What's going on here?

Thanks so much for any help.

Upvotes: 3

Views: 907

Answers (1)

Nelson Yeung
Nelson Yeung

Reputation: 3382

I have a working fork of your Plunkr here. I would recommend following this GitHub issue.

I've basically added:

host: {
  '[@routerTransition]': 'true',
},

to all your components: home.component.ts and about.component.ts). In addition, changed your slideToRight() function to use the states void and wildcard *.

Upvotes: 1

Related Questions