2

我正在尝试将路线（页面）转换添加到我的 Angular 2 应用程序中。按照这个例子，我能够执行动画，但只触发离开动画。enter 动画未执行，导致“下一页”立即出现。

这是每个组件的代码：

@Component({
    selector: 'home',
    template: require('./home.component.html'),
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' }
})
export class HomeComponent {
}

这是动画代码，定义在一个单独的文件中：

import { trigger, state, animate, style, transition } from '@angular/core';

export function routerTransition() {
    return slideToLeft();
}

function slideToLeft() {
    return trigger('routerTransition', [
    state('void', style({ position: 'fixed', width: '100%' })),
    state('*', style({ position: 'fixed', width: '100%' })),
    transition(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
    ]),
    transition(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
    ])
]);

}

为什么只执行离开动画？

提前致谢！:)

4

0 回答 0