Angular2 - leaving animation not applying

Question

I have a Angular2 app, and I'm trying to add an animation to my routing, so it slides when I change pages. The entering animation works fine, however the leaving animation doesn't activate, the previous page just disappears after the new page is loaded. Does anyone know the cause of this issue? plunker

According to the anuglar2 docs, i think my transitions are correct.

// transition(':enter', [ ... ]); // void => *
// transition(':leave', [ ... ]); // * => void

animation file

export function routerTransition() {
    return trigger('routerTransition', [
        transition('void => *', [
            style({ transform: 'translateX(100%)' }),
            animate(1000)
        ]),
        transition('* => void', [
            style({ transform: 'translateX(-100%)' }),
            animate(1000)
        ])
    ])
}

child_1.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { routerTransition } from '../../directives/router.animation'; 
@Component({
    selector: 'about',
    template: require('./about.component.html'),
    styles: [require('./about.component.css')],
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' }
})

child_2.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { routerTransition } from '../../directives/router.animation'; 
@Component({
    selector: 'home-info',
    template: require('./home.component.html'),
    styles: [require('./home.component.css')],
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' }
})

Answer 1

It looks like there are two primary issues:

1. The leave transition is defined the same way as the enter transition but it needs to be defined differently so that the specified style is used as the 'end' state instead of the 'start' state of the transition.

   // Instead of
   transition('* => void', [
       style({ transform: 'translateX(-100%)' }),
       animate(1000)
   ])
   
   // Use
   transition('* => void', 
        animate(1000, style({transform: 'translateX(-100%)', opacity: 0}))
   )
   

2. You need to have display:block (or inline-block) on the host since otherwise it's inline and the translate only works on blocks.

   // Instead of
   host: { '[@routerTransition]': '' }
   
   // Use
   host: {
      '[@routerTransition]': 'true',
      '[style.display]': "'block'",
   },
   

Although the animation probably isn't what you want, at least its a more-or-less working starting point: https://plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo?p=preview

Here's another example from the angular folks: http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview

Answer 2

I think you should be changed the code for animation as below:

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

Here is an example Plunk

Note: In Angular 4, animations have pulled out of @angular/core and into the package that allows you to more easily find documentation and to take better advantage of autocompletion.