Angular 2+ анимация с ngIf и дополнительными параметрами

Question

Я хочу создать слайд-шоу, и слайды переключаются с помощью * ngIf и индекса var в моем компоненте (индекс var установлен моей кнопкой «вперед / назад») - легко. Анимация для этого проста:

trigger("slideInOut", [
    transition(":enter", [
        style({ transform: "translateX(+100%)", position: "absolute" }),
        animate("400ms ease-in", style({ transform: "translateX(0%)" }))
    ]),
    transition(":leave", [
        style({ transform: "translateX(0%)"}),
        animate("400ms ease-out", style({ transform: "translateX(-100%)" }))
    ])
])

и в шаблоне что-то вроде этого:

<div class="slide" *ngIf="slideIndex === 0" [@slideInOut]>

и так далее. Но теперь я хочу изменить анимацию относительно направления (влево / вправо) слайд-шоу, значит: вперед, назад -> использовать +/- 100% в translateX и т. Д. В моем компоненте у меня есть направление var, которое имеет «left» или «right» в зависимости от направления, но я не знаю, как передать это в анимацию, и все еще использую так же отпуск / ввод. Есть идеи?

РЕДАКТИРОВАТЬ, понял это: см. Учебник здесь

trigger("slideInOut", [
    transition("void => prev", [
        style({ transform: "translateX(-100%)", position: "absolute", top: 0, opacity: 0 }),
        animate("300ms ease-in", style({ transform: "translateX(0%)", opacity: 1 }))
    ]),
    transition("prev => void", [
        animate("300ms ease-out", style({ transform: "translateX(+100%)", opacity: 0 }))
    ]),
    transition("void => next", [
        style({ transform: "translateX(+100%)", position: "absolute", top: 0,  opacity: 0 }),
        animate("300ms ease-in", style({ transform: "translateX(0%)", opacity: 1 }))
    ]),
    transition("next => void", [
        animate("300ms ease-out", style({ transform: "translateX(-100%)", opacity: 0 }))
    ])
])

и

[@slideInOut]="orientation"

сделает работу. 'direction' - это переменная компонента, а кнопки next и prev переключают его состояние 'next' / 'prev'