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]': '' }
})
It looks like there are two primary issues:
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}))
)
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
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.