CODEWITHSUNDEEP
javascriptangularanimationangular2-routing
AJ_
AJ_

Reputation: 3987

Angular2 - leaving animation not applying

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

Upvotes: 6

Views: 4551

Answers (2)

Ha Hoang
Ha Hoang

Reputation: 1684

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.

Upvotes: 3

Charlie
Charlie

Reputation: 9108

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

Upvotes: 7

Related Questions