Angular 5 Просмотр анимаций, но условный

У меня есть пронумерованное навигационное меню с 6 пунктами, и их порядок важен, например, например, оформить заказ, войти в систему / создать учетную запись, затем отгрузить, а затем настроить платеж:

Вы можете вернуться к шагу на любом этапе. Форвард тоже разрешен. Прыгает несколько вперед и назад.

Я хотел бы, чтобы анимации для содержимого страницы соответствовали логике порядка этих шагов.

Для этого я забрал свой код отсюда: https://plnkr.co/edit/Uo1coU9i1GsB1I4U3809?p=preview

(Я продублировал routerTransition код, затем переименовал первый в slideLeft перевернул анимацию и переименовал второй в slideRight).

(Это не является частью этого вопроса, но чтобы дать вам представление о том, куда он движется: в качестве бонуса я добавлю функции, которые последовательно переходят к каждому промежуточному шагу для вас, если вы щелкаете элемент навигации больше, чем n+1 от самого себя. Цель этого состоит в том, чтобы подражать ощущению, что каждая страница действительно представляет собой один слайдер или карусель один на один.)

Я уже успешно настроил маршрутизацию и анимацию, уже могу визуализировать логику функции, которая с параметрами: "текущий маршрут" и "новый маршрут" может выдавать логическое значение "slideLeft" или "slideRight".

Чего мне не хватает, так это сказать приложению, скользить ли влево или вправо?

Чего я не понимаю, так это того, что в routing.module.html синтаксис не позволяет, насколько я знаю, реализовывать условия:

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

}

Я заметил:

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

the: * => * означает "от любого имени до любого имени", и сначала я подумал, что мог бы использовать это, заменяя его каждый раз на имена маршрутов, но я заблудился в реализации, и теперь я считаю, что должен быть более простой способ.

то, что я хотел бы сделать, это что-то вроде:

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

Я сомневаюсь, что это на самом деле возможно, хотя.

Источник

2 ответа

Решение

Похоже, анимация не воспроизводится при возврате нулевого значения в getStateLeft(outlet) метод. Вы можете попробовать что-то вроде этого:

<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;
}
Источник

Я нашел это https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm не уверенный, смогу ли я реализовать, я посмотрю в Это. отмеченное решение оказывается сложным, так как оно зависит только от того, что сработает первым.

Источник
Другие вопросы по тегам