1

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(); } } }, } });
Improve this question

    1 Answer 1

    Reset to default
    4

    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.

    Improve this answer
    1
    • Awesome example, thanks for the code. Is this something that can be done using a directive?
      – SoluableNonagon
      CommentedMar 24, 2014 at 21:03