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!