Как анимация angular 4 правильно перемещает маршрутизатор?

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

вот как выглядит мой код

приложение.component.html :

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

и вот мой app.component.ts:

animations: [
    trigger('routerTransition', [
      state('in', style({ transform: 'translateX(0)' })),
      transition('out => in', [
        style({ transform: 'translateX(-100%)' }),
        animate(400)
      ]),
      transition('in => out', [
        animate(400, style({ transform: 'translateX(100%)' }))
      ])
    ]),
  ]

})


export class AppComponent {
    fadePageInOut: string = 'in';

  getRouterOutletState(outlet) {
    console.log(outlet + " event triggered outlet");
    this.fadePageInOut = (this.fadePageInOut === 'in' ? 'out' : 'in');
  }

}

почему это не работает? что я пропустил здесь? и console.log результата моего кода выглядит так:

введите здесь описание изображения

событие увеличивается, когда я прокручиваю свою страницу вверх и вниз, я должен сделать что-то неправильно для запуска события, и все равно переход не будет работать


angular animation transition css-transitions router-outlet
person Ke Vin    schedule 13.11.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

<main [@routerTransition]="fadePageInOut">

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

И анимация будет срабатывать только тогда, когда вы измените состояние с «вне» на «в» и наоборот, поэтому кажется, что вы также должны изменить это:

transition('out => in', [

к этому:

transition('* => in', [
person Commercial Suicide    schedule 13.11.2017
comment
Можете ли вы помочь мне предоставить полный код? я так пробовал и ничего не произошло, даже функция не срабатывает - person Ke Vin; 13.11.2017

arrow_upward
1
arrow_downward

Вы не возвращаете никакого значения из функции getRouterOutletState(). В результате анимация не запускается. Добавьте оператор return из функции getRouterOutletState() и верните текущее значение fadePageInOut.

getRouterOutletState(outlet) {
  console.log(outlet + " event triggered outlet");
  this.fadePageInOut = (this.fadePageInOut === 'in' ? 'out' : 'in');

  return this.fadePageInOut; // <-- Add this line
}

Полезная ссылка для Angular Route Animations: https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8

person Aamir Khan    schedule 13.11.2017
comment
да, я следую этому руководству, но я застрял. После того, как я добавляю строку возврата, она дает эту ошибку. Ошибка: ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после проверки. Предыдущее значение: «в». Текущее значение: «вне». Что это значит? я меняю свое значение или нет, это просто дает мне эту ошибку - person Ke Vin; 13.11.2017