Question

在搜索了一整天之后，我被困住了所以我想请求一些帮助。

我如何在angular2中实现这样的效果： http://dfsq.github.io/ngView-animation-effects/app/#/page/1

我的意思是如何使用路由器在2页之间无缝转换？我可以动画页面更改，但现在就是这样：

animation-in-＆gt;第一页加载 - ＆gt;动画输出＆gt; 空路由器插座（因为组件被销毁） - ＆gt;动画输入＆gt;第二页加载< / p>

但我希望：

动画输入＆gt;第一页加载 - ＆gt;动画输出第一页 - ＆gt;动画输入第二页 - ＆gt;第二页加载 - ＆gt;并在这里销毁第一页

任何帮助都会受到关注：）

Answer 1

好吧，所以我得到它的工作，如果有人有兴趣，这是我的解决方案 - 任何指向更好的一个是受欢迎的，因为我是角落世界的菜鸟：）

public activate(nextInstruction: ComponentInstruction): Promise<any> {
      let previousInstruction = this.currentInstruction;

      this.currentInstruction = nextInstruction;

      let componentType = nextInstruction.componentType;
      let childRouter = this.parentRouter.childRouter(componentType);

      let providers = ReflectiveInjector.resolve([
          provide(RouteData, {useValue: nextInstruction.routeData}),
          provide(RouteParams, {useValue: new RouteParams(nextInstruction.params)}),
          provide(routerMod.Router, {useValue: childRouter})
      ]);

      this.previousComponentRef = this.currentComponentRef;

      return this.loader.loadNextToLocation(componentType, this.currentElementRef, providers)
          .then((componentRef) => {

              this.currentComponentRef = componentRef;

              Observable.of(true).delay(100).toPromise().then(response => {
                if(this.previousComponentRef){
                  this.previousComponentRef.location.nativeElement.className = 'animateout';
                }
                this.currentComponentRef.location.nativeElement.className = 'animatein';
              });

              if (hasLifecycleHook(hookMod.routerOnActivate, componentType)) {
                  return (<OnActivate>componentRef.instance)
                      .routerOnActivate(nextInstruction, previousInstruction);
              }
          });


}


public routerCanDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
    if (isBlank(this.currentInstruction)) {
        return this.resolveToTrue;
    }

    let ref = this.currentComponentRef;

    Observable.of(true).delay(2000).toPromise().then(response => {
        ref.destory();
    });

    return this.resolveToTrue;
}

你可以看到ai已经扩展了router-outlet并实现了两个上面的方法，其中首先将动画类添加到组件，第二个等待组件dispose以允许动画，这里是示例动画（dm-page，dm-home，dm -contact是组件选择器）：

dm-page, dm-home, dm-contact{position: fixed;top:100%; left:0; width: 100%; height: 100%;
 -webkit-transition: top .8s ease-in-out;
-moz-transition: top .8s ease-in-out;
-o-transition: top .8s ease-in-out;
transition: top .8s ease-in-out;}

.animatein {top:0;}
.animateout {top:-100%;}

两个组件之间的路由转换而不破坏第一个组件？

1 个答案: