Clever Geek Handbook

Angular2 - no animation

I have an Angular2 app and I am trying to add animation to my routing so it crawls when changing pages. The inbound animation works fine, however the outbound animation is not activated, the previous page just disappears after the new page loads. Does anyone know the cause of this problem? 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]': '' }
})
+3


source to share


2 answers


I think you need to change your animation code like 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's an example Plunk

Note: In Angular 4, animations came out of @ angular / core and into a package, which makes it easier for you to find documentation and better use autocomplete.

+1


source


It looks like there are two main problems:

  • A vacation transition is defined in the same way as an input transition, but it needs to be defined differently so that the specified style is used as the "end" state rather than 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 as otherwise it is built in and the translation is done only in blocks.

    // Instead of
host: { '[@routerTransition]': '' }

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


While the animation is probably not what you want, at least its more or less a working starting point: https://plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo?p=preview

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

+5


source






More articles:


All Articles