Ng-animate not working in AngularJS?

Question

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.

Can you confirm what version of AngularJS you're using? Animation via ngAnimate is only available in the unstable versions, and not in the 1.0.7 version that is the latest stable one. — Michal Charemza
– Michal Charemza, Commented Jun 22, 2013 at 22:06
@MichalCharemza wow, you're right... I was on 1.0.7. Just upgraded to 1.1.5 and the animations worked instantly. Thank you! — Jakemmarsh
– Jakemmarsh, Commented Jun 22, 2013 at 23:46

Jakemmarsh · Accepted Answer · 2013-06-22 23:47:15Z

6

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.

answered Jun 22, 2013 at 23:47

Jakemmarsh

4,68112 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dmackerman Over a year ago

Thanks, this works great! Needs to be tweaked a bit in terms of how the animation feels, but the concept seems to work.

Collectives™ on Stack Overflow

Ng-animate not working in AngularJS?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related