Angular 2 animations: router animation

Vote count: 0

I'm try to add route (page) transition to my angular 2 app. Following this example I was able to perform animations but only the leave animation is triggered. The enter animation is not executed causing the "next" page to appear immediatly.

This is the code of each component:

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

And this is the animations code, defined in a separated file:

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%)' }))
    ])
]);

}

Why only the leave animation is executed?

Thanks in advance! :)

asked 22 secs ago

Androidian

Let's block ads! (Why?)

Angular 2 animations: router animation