AngularJS Animations with JavaScript - angularjs

Question

See this JSFiddle: http://jsfiddle.net/5mUsH/3/
I'm trying to do a really simple JavaScript animation in AngularJS and jQuery. (I'm not using CSS animations because I want to support older browsers and also do more complex animations.) The code in the fiddle is from the AngularJS user guide (but slightly simplified): http://docs.angularjs.org/guide/animations
But—it doesn't work! The DOM is updated immediately (without animating). Any ideas? Thanks!
Here is the relevant markup from the JSFiddle:
<div class="sample" ng-show="checked">
Visible...
</div>
And the JavaScript:
angular.module('App', ['ngAnimate']).animation('.sample', function() {
return {
enter : function(element, done) {
element.css('opacity',0);
jQuery(element).animate({
opacity: 1
}, done);
// optional onDone or onCancel callback
// function to handle any post-animation
// cleanup operations
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},
leave : function(element, done) {
element.css('opacity', 1);
jQuery(element).animate({
opacity: 0
}, done);
// optional onDone or onCancel callback
// function to handle any post-animation
// cleanup operations
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},
}
});

Answer 1

I approached it in a slightly different way as the ng-show was overriding the animations. Since you wanted to use jQuery:
http://jsfiddle.net/wiredprairie/5tFCZ/1/
angular.module('App', ['ngAnimate']).animation('.sample', function () {
return {
addClass: function (element, className, done) {
if (className === 'hidden') {
jQuery(element)
.css({
opacity: 1
})
.animate({
opacity: 0
}, 500, done);
} else {
done();
}
},
removeClass: function (element, className, done) {
if (className === 'hidden') {
jQuery(element)
.css({
opacity: 0
})
.animate({
opacity: 1
}, 500, done);
} else {
done();
}
}
}
});
Basically, the hidden CSS class is toggled, then the corresponding animation code executes.