Discussion :

[dragonfly]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[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)