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.
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.
Share Improve this question edited Jun 22, 2013 at 21:34 Jakemmarsh asked Jun 22, 2013 at 20:56 JakemmarshJakemmarsh 4,67112 gold badges44 silver badges71 bronze badges 2- 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 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 Commented Jun 22, 2013 at 23:46
1 Answer
Reset to default 6My 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.