使用 Angular 2.0 路由器的页面过渡动画

Page transition animations with Angular 2.0 router

本文关键字：动画 Angular 路由器 使用      更新时间：2023-09-26

在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 。

非常感谢任何帮助！

您可以在

<router-outlet>所在的位置添加一个"EchoComponent"，在其中创建一个<canvas>并在routerOnDeactivate()上drawImage()...像这样：

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

这只是一个伪代码（从内存中编写），但它应该说明这种方法需要什么。

相关文章：