0

I am faceing an issue with angular2 animation. App has a guide system where User navigate from step 1 to step 2 and so on. Now i have animation on routing where my first component slide to left and second come from right side and this is same for every step, this flow works very well but i want to reverse it when user go back to previous step then i want that current component should slide to right and previous component should slide in from left side.

animation.ts

import {trigger, state, animate, style, transition} from '@angular/animations';
export const routeAnimation =
 trigger('routeAnimation', [
 state('void', style({position: 'absolute',  width: '100%', top: '150px', left: '20px'})),
 state('*', style({position: 'absolute', width: '100%', top: '150px', left: '20px'})),
    transition(':enter', [
      style({transform: 'translateX(100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-out', style({transform: 'translateX(-100%)'}))
    ])
]);

Components to animate while route import {Component, HostBinding} from '@angular/core';

import {routeAnimation} from './animation';
import {state} from '@angular/animations';
@Component({
    template: `<h1>first</h1>`,
    animations: [routeAnimation]
})
export class FirstComponent {
    @HostBinding('@routeAnimation') routerTransition = true;
}
@Component({
    template: `<h1>second</h1>`,
    animations: [routeAnimation]
})
export class SecondComponent {
    @HostBinding('@routeAnimation') routerTransition = true;
}
@Component({
    template: `<h1>third</h1>`,
    animations: [routeAnimation]
})
export class ThirdComponent {
    @HostBinding('@routeAnimation') routerTransition = true;
}
@Component({
    template: `<h1>fourth</h1>`,
    animations: [routeAnimation]
})
export class FourthComponent {
    @HostBinding('@routeAnimation') routerTransition = true;
}

Thanks in advance.

Jorawar Singh
  • 7,463
  • 4
  • 26
  • 39
  • Maybe this helps: http://stackoverflow.com/a/42948545/5155810 Here is my implementation of sliding route-transitions with dynamicly assigned directions: https://embed.plnkr.co/cOeDfXCetaYuXFaZ7WeO/ – Martin Cremer Apr 17 '17 at 21:44
  • Yes exactly that is the behavior i am looking for. let me try this in my code. – Jorawar Singh Apr 18 '17 at 03:50

0 Answers0