CODEWITHSUNDEEP
angularanimationangular-routingangular-routerangular-animations
tatsu
tatsu

Reputation: 2536

Angular 5 Browsing animations but conditional

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 :

enter image description here

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.

Upvotes: 4

Views: 1900

Answers (2)

tatsu
tatsu

Reputation: 2536

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.

Upvotes: 0

Kay van Bree
Kay van Bree

Reputation: 2082

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;
}

Upvotes: 3

Related Questions