I have been scouring the web for an answer to this but I cannot seem to find any definitive answers.

The problem seems to be that the ngAnimate directive is not adding the classes ng-enter or ng-leave when the route is changing. I have created a test application and included the ngAnimate directive to the app. I also created the animate class and applied the class to the ng-view element

The link to my test application is here:

I have been scouring the web for an answer to this but I cannot seem to find any definitive answers.

The problem seems to be that the ngAnimate directive is not adding the classes ng-enter or ng-leave when the route is changing. I have created a test application and included the ngAnimate directive to the app. I also created the animate class and applied the class to the ng-view element

The link to my test application is here: http://plnkr.co/edit/6qCMeIkWeXeTQyDWcu29?p=preview

• javascript
• angularjs
• angularjs-directive
• ng-animate
• ng-view

Share Improve this question Follow asked Aug 21, 2014 at 17:05 LukePLukeP 1,60511 gold badge1919 silver badges2626 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Simply add each vendor's prefix for each browser e.g. chrome's -webkit in your css file

FORKED PLUNKER

.slide.ng-enter, .slide.ng-leave{
  position: absolute;
}

.slide.ng-enter { 
  animation: slideInRight 0.5s both ease-in; z-index: 8888; 
  -webkit-animation: slideInRight 0.5s both ease-in; z-index: 8888; 
}
.slide.ng-leave { 
  animation: slideOutLeft 0.5s both ease-in; z-index: 9999; 
  -webkit-animation: slideOutLeft 0.5s both ease-in; z-index: 9999; 
}


@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

@-webkit-keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}


@keyframes slideInRight {
    from    { transform: translateX(100%); }
    to      { transform: translateX(0); }
}

@-webkit-keyframes slideInRight {
    from    { transform: translateX(100%); }
    to      { transform: translateX(0); }
}