Angular 5 Browsing animations but conditional

Question

I've got a numbered nav menu with 6 items and their order is important, say, for example, like a checkout then login/create account then shipment then payment setup :

You can go back in the steps at any step. Forward is authorized too. Jumping several forward and back as well.

I'd like animations for the page content that follow suit with the logic of the order of these steps.

For this I snagged my code from here : https://plnkr.co/edit/Uo1coU9i1GsB1I4U3809?p=preview

(I duplicated the routerTransition code, then renamed the first into slideLeft inversed the animation and renamed the second to slideRight).

(This is not part of this question but so as to give you an idea of where this is heading : As a bonus I'll add a functions that navigates to each intermediary step successively for you if you click a nav element more then n+1 away from itself. the purpose of this would be to emulate the feeling that each page does indeed constitute a single slider or carousel toe-to-toe.)

I've already successfully set up the routing and the animation, I can already visualize the logic of function that with parameters : "current route" and "new route", can spit out a boolean signifying "slideLeft" or "slideRight".

What I'm missing is how to tell the app whether to slide left or slide right?

What I don't get is that in the routing.module.html the syntax doesn't allow, as far as I know, for implementing conditionality :

<main [@slideRight]="getState(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

routing.component.ts :

import { Component, OnInit } from '@angular/core';
import { slideLeft, slideRight } from './router.animations';


@Component({
  selector: 'app-routing',
  templateUrl: './routing.component.html',
  styleUrls: ['./routing.component.scss'],
  animations: [slideLeft, slideRight],
  host: { '[@slideLeft, slideRight]': '' }
})
export class RoutingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  getState(outlet) {
    return outlet.activatedRouteData.state;
  }

}

I noticed the :

export const slideRight = trigger('slideRight', [
      transition('* => *', [

the : * => * means "from any name to any name" and at first I though I could be using that by replacing that each time with the route names but I got lost in the implementation and I now believe there must be an easier way.

what I'd like to do is something along the lines of :

<main {{isCurrentStepIncreasing ? '[@slideLeft]' : '[@slideRight]'}}="getState(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

I doubt that's actually possible though.

I think is not the answer but maybe this article is useful : https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8 — Rubén Soler, Feb 16 '18 at 07:59
that's exactly what I linked. well I linked their plunker directly but same difference. sorry but that's not much help :/ — tatsu, Feb 16 '18 at 10:00

score 3 · Accepted Answer · answered Feb 16 '18 at 11:07

3

It looked like no animation is being played when returning null in the getStateLeft(outlet) method. You could try something like this:

<main [@slideRight]="getStateLeft(o)" [@slideLeft]="getStateRight(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>


getStateLeft(outlet) {
  if (isCurrentStepIncreasing) {
      return outlet.activatedRouteData.state;
  }
  return null;
}

getStateRight(outlet) {
  if (!isCurrentStepIncreasing) {
      return outlet.activatedRouteData.state;
  }
  return null;
}

answered Feb 16 '18 at 11:07

Scuba Kay

2,004
3
26
48

that's a yes from me. Well done! just a last bit of help: what's your take on adding the several slides functionality? to me; I'd add a var inside each component which would be the first thing they check, if it's true they don't execute any of their own html.get methods ect, leaving blank layouts to slide by quickly without overloading the browser as they do and then I'd create an algorithm that determines beginning end end and triggers the route changes with 500ms delays between each. I'm thinking it's sloppy on my part but I've got no better ideas, you? – tatsu Feb 16 '18 at 11:18
the real issue is intercepting the nav calls. the way I see it that code is going to be spaghetti. – tatsu Feb 16 '18 at 13:30
yeah the issue with the above code is that it works fine so long as you increase or decrease several times but it'll always register a change of direction one step too late. any ideas? – tatsu Feb 16 '18 at 15:29

score 0 · Answer 2 · answered Feb 16 '18 at 15:01

I found this https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm not sure whether I can implement I will look into it. the marked solution is turning out tricky as it's just up to whichever triggers first.

Angular 5 Browsing animations but conditional

2 Answers2