Search code examples
javascriptcssangularjsng-animate

Ng-animate not working in AngularJS?

I'm working on a mobile app using Phonegap and AngularJS. I'm currently just developing and testing on a local wampserver for ease.

I'm trying to get ng-animate working on my ng-view, in order to animate changing of views similar to mobile apps. Any guide I follow or any code I use doesn't seem to do anything at all. No errors or animations.

Here's my current ng-view code:

    <body ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></body>

And here's my current CSS for that ng-animate:

.view-enter, .view-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.view-enter {
  opacity:0;
  left:100px;
  width:100%;
  position:absolute;
}
.view-enter.view-enter-active {
  left:0;
  opacity:1;
}

.view-leave {
  position:absolute;
  left:0;
  width:100%;
  opacity:1;
}
.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

And yet, no errors or animations at all. Any ideas of what I'm doing wrong or how I can get animations working? Thanks.

Solution

  • My problem was pointed out thanks to Michal Charemza... I was on the latest stable version of AngularJS, 1.0.7, and ng-animate is only in the unstable versions. I downloaded 1.1.5 from here and the above code for animations worked instantly.