[Angular 4] Animations plante migration angular 2 vers 4.1.3

Version imprimable

Bonjour,

j'ai un petit problème avec l'animation que voici:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
animations: [
    trigger('toggle', [
        state('shown', style({transform: 'translate3d(0,0,0)'})),
        transition('hidden => *', [
            animate('300ms cubic-bezier(0.5, 0.130, 0.5, 0.950)', style({transform: 'translate3d(0,0,0)'}))
        ]),
        transition('* => shown', [
            animate('300ms cubic-bezier(0.5, 0.130, 0.5, 0.950)', style({transform: 'translate3d(0,0,0)'}))
        ]),
        transition('shown => hidden', [
            animate('300ms cubic-bezier(0.5, 0.130, 0.5, 0.950)', style({transform: 'translate3d(100%,0,0)'}))
        ]),
    ])
]

Appelé comme suit:

Code:

1
2
3
4
 
<div class="cars-popin-wrap" [@toggle]="stateToggle" > 
 <router-outlet></router-outlet>
</div>

Elle fonctionne sous Angular 2 mais plus sous la 4

Quelqu'un sait comment résoudre ce probléme?

Par avance, merci

17/04/2018, 12h16
Marco46

Un des breaking changes de la 4 c'est de mettre les animations dans un package dédié.

Donc vérifie qu'il est bien importé.

Quand tu fais une montée de version majeure, il est conseillé de la faire sans aucun autre changement et de vérifier que tout fonctionne bien. Si il y a un soucis se référer alors au CHANGELOG pour trouver la cause.
17/04/2018, 15h33
dragonfly

Salut Marco46,
merci pour ta réponse

j'ai effectivement importé les animations du nouveau package 'animations' mais sans succès

En fait le problème vient de "NoopAnimationsModule", sur Angular2 il fonctionnait mais il faut l'enlever sur Angular4 (à priori il empêche les animations de se dérouler dans le temps imparti), je l'ai enlevé et je n'ai plus de problème.

Et il faut aussi éviter les noms de state genre 'true', 'false' , les animations angular4 n'aiment pas du tout (j'avais ce problème sur une autre animation du même projet)