1 pièce(s) jointe(s)
[AngularJS-Bootstrap][ng-animate] ng-leave et ng-enter l'un au dessus de l'autre
Bonjour,
J'ai besoin de vous s'il vous plait.
J'ai un routage de pages avec ui-router
HTML:
Code:
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:
1
2
3
| $stateProvider.state('target',{
url :'/:target',
templateUrl: 'views/main.html', |
Ensuite dans mon css je défini les anims
CSS:
Code:
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)
Pièce jointe 246158
Merci pour votre aide! :)
