чередование двух или более угловых анимаций

Question

Угловые анимации работают следующим образом:

<div *ngIf="show" [@slideThoughLeft] class="title-text">My title</div>

с:

//a bit of js hiding title and revealing again a second later hence triggering animations 

и:

export const slideThoughLeft = trigger(
  'slideThoughLeft',
  [
    transition(
      ':enter', [
        style({opacity: 0, transform: 'translateX(50%)'}),
        animate('500ms', style({opacity: 1, transform: 'translateX(0)'}))
      ]
    ),
    transition(
      ':leave', [
        style({opacity: 1, transform: 'translateX(0)'}),
        animate('500ms', style({ opacity: 0, transform: 'translateX(-50%)'}))
      ]
    )]
);

и намного более мощные, чем анимации, которые вы могли бысоздавайте через свои собственные js-хуки и css.

Отсюда и их использование.

, но с помощью анимации маршрутизатора мне удалось установить сложный набор правил для моей анимации:

<main class="root routing" [@animRoutes]="getPage(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

с:

getPage(outlet){return outlet.activatedRouteData['page'] || 'one'}

и:

(я собирался опубликовать алгоритм анимации длиной 300 строк, потом я понял, что это будет препятствовать чтению, поэтому я будуизбавить вас от некоторого псевдокода, который делает потенциал, который вы можете использовать, и который я задействовал, очевиден:)

if route "home" to "contact" then slideUpFast
if route "contact" to "home" then slideDown
if route "home" to "about" then jumpIn
if route "contact" to "about" then slideDownSlow
Ect...

Дело в том, что такого рода свобода допускается с анимацией маршрутизатора, но, насколько я могу судить, имеетне всегда были доступны с регулярными угловыми анимациями.

Я пытался:

<div [@animRoutes]="getPage()" class="title-text">My title</div>

с:

getPage(){return this.store.path}

, предварительно проверив, что мой var this.store.path возвращаеттак же, как outlet.activatedRouteData['page'].

, но это привело к анимеtion не воспроизводится вообще.

, поэтому "взлом" в анимации маршрутизации, где должна быть угловая анимация, не допускается.

, тогда я изучил этот синтаксис:

export const translateInAnimation = trigger(
  'translateInAnimation',
  [
    state('left', style({ transform: 'translateX(0)' })),
    state('right', style({ transform: 'translateX(-100%)' })),
    transition('left <=> right', animate('620ms ease-out'))]
);

это позволяет осуществлять переход между двумя состояниями.

, который мог бы работать, если бы у меня было две страницы, но здесь, где мне нужно анимировать заголовок, скользящий правильно влево или вправо и есть 8 страниц, я не знаю, как это использовать.

также этот синтаксис служит только для сокрытия текущего, чтобы не раскрывать новое, и я не знаю, как бы я представил HTML, чтобы использовать это для моего контекста.

Я хотел бы знать, еслиесть угловой синтаксис, позволяющий мне переключать угловую анимацию на лету.