Animations stopped working

[franciscopuyo]

Hi, how are you? The fact is that my animations run by ngAnimate stopped working. I tested one of them in another enviroment and it works:

 <style type="text/css">

                        .cssSlideUp {
                            transition: .5s linear all;
                            height: 400px;
                            overflow: hidden;
                            background: blue;
                        }
                        .cssSlideUp.ng-hide {
                            height:0;
                        }

                    </style>

                    <md-checkbox ng-model="hide">Esconder</md-checkbox>
                    <div ng-hide="hide" class="cssSlideUp">Lorem ipsum dolor med</div>

The fact is i have ngAnimate library well-configured: I have the angular-animate.js added to the index and the injection of ngAnimate made in the main controller file and they don't throw any error or warning. Have you made any change that could affect my current development?

Thanks

Francisco

[Narretz]

There is not enough info for us to work with. Please

• tell us which version of angular / angular.animate you are using and if you have been upgrading from a previous version
• provide a minimal demo of the problem on plnkr etc.

[franciscopuyo]

Hi again, I've been looking to my updates in libraries. The fact is that using angular-animate 1.4.1 it doesn't work, but downgrading it to 1.3.16 it does work. What it could be?

Thanks again

[caitp]

there have been breaking changes in ngAnimate, it's hard to say which ones you're hitting, but I'm betting it's related to $animateCss vs $animate (@matsko a compat library would be really, really helpful. The new api is not very appealing to use :()

[matsko]

Running your CSS code without any material stuff works:

http://plnkr.co/edit/Hyjrk7YJxmH0e4kgFhEq?p=preview

I'm not sure which version of Material you're using and if that is really the thing that's breaking it. So I'll need a bit more info.

[franciscopuyo]

Thanks matsko,

I realize that i have an older version of angular so angular-animate didn't work. Thanks to all of you, i could solve it

[matsko]

OK excellent. I'm closing this for now. Please open a new issue if anything else pops up.

[zakhenry]

I am having the same issue that @franciscopuyo had - If i'm using the latest version of angular (1.4.1 at the moment) I have no animations functioning (material or otherwise), but if I revert my bower version of angular to ~1.3 the animations work again.

I just tried bumping my material version to the latest (0.10.0) but that didn't seem to achieve anything.

I have an unresolved question at http://stackoverflow.com/questions/30827954/nganimate-not-adding-classes-with-angular-material with my specific issue.

[franciscopuyo]

@xiphiaz as an advice, check you have 1.4.1 version in all your angular modules. Perhaps to solve another dependencies angular is turning to another version (if you use bower or other package manager)

[zakhenry]

@franciscopuyo I have verfied that both angular and angular-animate are being loaded as 1.4.1 by checking the source in chrome - the header docblock has the following comment, and it is the same for both.

/**
 * @license AngularJS v1.4.1
 * (c) 2010-2015 Google, Inc. http://angularjs.org
 * License: MIT
 */

[OpenSiteMobile]

I can confirm that the latest version of angular-animate.js I could find (https://github.com/angular/bower-angular-animate -> v1.3.17) doesn't work with v1.4.1, but does with v1.3.16.

The trouble starts with $delegate.$$setClassImmediately, $delegate.$$addClassImmediately and $delegate.$$removeClassImmediately, which don't exist in v1.4.1 as far as I can tell.

Plus this in v1.4.1... var $AnimateProvider = ['$provide', function($provide) { var provider = this;

this.$$registeredAnimations = Object.create(null);

Was this in v1.3.16... var $AnimateProvider = ['$provide', function($provide) {

this.$$selectors = {};

So the $animateProvider.$$selectors; object under "config" is no longer available to angular-animate.js.

Here is what at least got it working:

Under $provide.decorator('$animate'), I modified "setClass" as follows:

    setClass: function(element, add, remove, options) {
      options = parseAnimateOptions(options);

      var STORAGE_KEY = '$$animateClasses',
        styles,
        currentDefer;

      element = angular.element(element);
      element = stripCommentsFromElement(element);

      if (classBasedAnimationsBlocked(element)) {

        if (add)    { element.addClass(add); }
        if (remove) { element.removeClass(remove); }

        if (angular.isObject(options)) {
            var styles = angular.extend(options.from || {}, options.to || {});

            element.css(styles);
        }

        if (!currentDefer) {
            currentDefer = $$q.defer('ng_animate_setClass');
            $$asyncCallback(function() {
                currentDefer.resolve();
                currentDefer = null;
            });
        }

        return currentDefer.promise;
      }

...and the return cache.promise was changed to this:

return !classes
              ? done()
              : performAnimation(
                    'setClass',
                    classes,
                    element,
                    parentElement,
                    null,
                    function () {
                        if (classes[0]) {
                            element.addClass(classes[0]);
                        }
                        if (classes[1]) {
                            element.removeClass(classes[1]);
                        }

                        if (!currentDefer) {
                            currentDefer = $$q.defer('ng_animate_performAnimation');
                            $$asyncCallback(function () {
                                currentDefer.resolve();
                                currentDefer = null;
                            });
                        }
                    },
                    cache.options,
                    done
                );

So that seems to work (no errors), but I can't say its the best solution. Mostly just moved missing functionality from AngularJS v1.4.1 to angular-animate.js v1.3.17.

[zakhenry]

@OpenSiteMobile has your fix been applied with the latest angular bower (1.4.2) ? I'm still having the same problem when upgrading to 1.4.2