Discussion :

[kululu]

Bonjour,

J'ai besoin de vous s'il vous plait.

J'ai un routage de pages avec ui-router

HTML:

Code html :

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

1
2
3
4
5
    <div class="content">
      <div class="scrolled">
        <div ui-view></div>
      </div>
    </div>

Avec un petit routage des familles rien de bien sorcier

JS:

Code :

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

1
2
3
  $stateProvider.state('target',{
    url :'/:target',
    templateUrl: 'views/main.html',

Ensuite dans mon css je défini les anims

CSS:

Code css :

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

1
2
3
4
5
6
7
8
9
10
@keyframes slideIn {
    from    { transform:translateX(0); }
    to      { transform: translateX(100%); }
}
@keyframes slideOut {
    from    { transform:translateX(-100%); }
    to    { transform: translateX(0%) }
}
[ui-view].ng-enter{ animation: slideOut 4s both ease-in;}
[ui-view].ng-leave{ animation: slideIn 4s both ease-in;}

L'animation marche mais la div du leave et celui du enter sont l'un au dessus de l'autre (et non l'un a coté de l'autre...) et je ne comprends pas pourquoi, j'ai chercher toute la journée sans trouver de solution... (cf image)


Merci pour votre aide!

[NoSmoking]

Bonjour,
de ce que je vois pour le départ

Code css :

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

to      { transform: translateX(100%); }

puis pour le retour

Code css :

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

from    { transform:translateX(-100%); }

je dirais que tu ne repars pas du même endroit.

[kululu]

Merci pour la remarque NoSmoking . J'ai trouvé une solution en rajoutant un "position : absolute" ça a marché.
Après je me trompe surement mais je fait un translateX (et non un translateY) je ne modifie en aucun cas les éléments sur l'axe des Y. L'élément qui entre et l'élément qui sort devrait logiquement se trouver sur la même ligne.