AngularJS Animations with JavaScript

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

WiredPrairie · Accepted Answer · 2014-02-01 03:05:46Z

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.

answered Feb 1, 2014 at 3:05

WiredPrairie

59.9k18 gold badges120 silver badges149 bronze badges

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

1 Comment

SoluableNonagon Over a year ago

Awesome example, thanks for the code. Is this something that can be done using a directive?

Collectives™ on Stack Overflow

AngularJS Animations with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related