Анимация перехода страницы с маршрутизатором Angular 2.0

В Angular 2 я пытаюсь анимировать новые компоненты с помощью метода Router onActivate.

Я создал Plunk с демонстрацией проблемы здесь: http://plnkr.co/FikHIEPONMYhr6COD9Ou

Пример метода onActivate в одном из компонентов страницы:

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
    document.getElementsByTagName("page3")[0].className='animateinfromright';
}

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

Есть ли способ отложить удаление предыдущей страницы, пока новая анимируется?

Я нашел аналогичную проблему: Переход страницы анимации с маршрутизатором Angular 2.0 и интерфейсом компонентов обещают, но этот метод просто откладывает удаление предыдущего компонента до добавления нового.

В конце концов у меня будут разные анимации в зависимости от того, с какой страницы мы переходим с/на, поэтому у нас есть onActivate в каждом из компонентов страницы.

Большое спасибо за любую помощь!


javascript angular angularjs angular2-routing
person Billy Mayes    schedule 26.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добавить «EchoComponent» туда, где находится ваш <router-outlet>, создать в нем <canvas> и drawImage() на routerOnDeactivate()... Что-то вроде:

@Component({
  template: `<canvas #canvas *ngIf="visible"></canvas>`
})
class EchoComponent {
  @ViewChild("canvas") canvas;
  public visible = false;

  constructor(private _shared: SharedEmitterService) {
    this._shared.subscribe(el => el ? this.show(el) : this.hide(el));
  }

  show(el) {
    this.canvas.drawImage(el);
    this.visible = true;
  }
  hide() {
    this.visible = false;
  }
}

@Component({...})
class PrevRoute {
  constructor(private _eref: ElementRef, 
              private _shared: SharedEmitterService) {}

  routerOnDeactivate {
    this._shared.emit(this._eref.nativeElement);
  }
}

@Component({...})
class NextRoute {
  constructor(private _eref: ElementRef, 
              private _shared: SharedEmitterService) {}

  routerOnActivate {
    this._shared.emit(false);
  }
}

Это всего лишь псевдокод (написанный по памяти), но он должен проиллюстрировать, что вам нужно для этого подхода.

person Sasxa    schedule 26.02.2016
comment
Вау, это отличная идея - я посмотрю, смогу ли я заставить ее работать - спасибо! - person Billy Mayes; 26.02.2016