路由切换动画怎么实现？

kittencup commented 8 years ago

import {Component, ElementRef, Renderer} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig, OnActivate, ComponentInstruction} from 'angular2/router';
import {AnimationBuilder} from 'angular2/animate';

@Component({
    selector: 'Index',
    template: `
        <h1>Index</h1>
        <p>kittencup</p>
    `
})
export class Index implements OnActivate {

    _hostEle:HTMLElement;

    constructor(public _animationBuilder:AnimationBuilder,
                public _elementRef:ElementRef,
                public _renderer:Renderer) {

        this._hostEle = this._elementRef.nativeElement;
        this._renderer.setElementStyle(this._hostEle, 'display', 'block');
    }

    routerOnActivate(next:ComponentInstruction, prev:ComponentInstruction) {

        return new Promise<void>((resolve)=> {

            this._animationBuilder
                .css()
                .setDuration(1500)
                .setFromStyles({opacity: 0})
                .setToStyles({opacity: 1})
                .start(this._hostEle)
                .onComplete(()=> {
                    resolve();
                });
        });

    }
}

@Component({
    selector: 'Login',
    template: `
         <div id="container">
            <h1>Login</h1>
            <input />
        </div>
    `
})
export class Login implements OnActivate {

    _hostEle:HTMLElement;

    constructor(public _animationBuilder:AnimationBuilder,
                public _elementRef:ElementRef,
                public _renderer:Renderer) {

        this._hostEle = this._elementRef.nativeElement;
        this._renderer.setElementStyle(this._hostEle, 'display', 'block');
    }

    routerOnActivate(next:ComponentInstruction, prev:ComponentInstruction) {

        return new Promise<void>((resolve)=> {

            this._animationBuilder
                .css()
                .setDuration(1500)
                .setFromStyles({opacity: 0})
                .setToStyles({opacity: 1})
                .start(this._hostEle)
                .onComplete(()=> {
                    resolve();
                });
        });

    }
}

@Component({
    selector: 'App',
    directives: [ROUTER_DIRECTIVES],
    providers: [AnimationBuilder],
    template: `
        <h1>App</h1>
        <a [routerLink]="['/Index']">Index</a>
        <a [routerLink]="['/Login']">Login</a>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    {path: '/', component: Index, name: 'Index', useAsDefault: true},
    {path: '/login', component: Login, name: 'Login'}
])
export class App {

}

Imporial commented 8 years ago

两个路由一个离开，一个激活的动画是分开播放的，有没有办法让他们同时播放

kittencup commented 8 years ago

我猜不需要返回promise就好了

Imporial commented 8 years ago

不行，离开动画会被覆盖

Imporial commented 8 years ago

新路由存在路由钩子这回事儿么？

slipkinem commented 7 years ago

OnActive接口貌似没了，怎么搞

kittencup / angular2-ama-cn

路由切换动画怎么实现？ #129