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.
1 Answers
Answers 1
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 *.
0 comments:
Post a Comment