7

I'm trying to incorporate the $animate service into my own directive. I can't get enter and leave to actually animate.

The weird thing is that using $animate.enter, the element is appended to the DOM, and the callback function fires. But it seems as though the ng-animate, ng-enter, and ng-enter-active classes never get added. The element is simply appended to the DOM without animation. The callback function fires, but it fires instantly and not after the duration of the animation that's supposed to happen. The same thing happens with leave; the element is removed from the DOM instantly, and the callback fires instantly; no animation.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>$animate.enter</title>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.5/angular-animate.js" data-semver="1.2.5"></script>

    <script type="text/javascript" charset="utf-8">
        var app = angular.module('TestAnimation', []);

        app.controller('TestAnimation', function($scope) {
        });

        app.directive("appendaroo", function($animate, $compile) {
          function link(scope, element, attr) {
            var isAppended = false;
            var parent = element.parent();
            var box;
            element.on('click', function() {
              isAppended = !isAppended;
              if (isAppended) {
                box = angular.element('<div class="rect"></div>');
                $animate.enter(box, parent, element, function() {
                  console.log("Done entering");
                });
              } else {
                $animate.leave(box, function() {
                  console.log("Done leaving");
                });
              }
            });
          }
          return {
            link: link
          };
        });
    </script>

    <style type="text/css" media="screen">
        .rect {
            width: 100px;
            height: 100px;
            background-color: #ff9933;
            transition: all 1s ease-out;
        }
        .rect.ng-enter,
        .rect.ng-leave.ng-leave-active {
            opacity: 0;
        }
        .rect.ng-enter.ng-enter-active,
        .rect.ng-leave {
            opacity: 1;
        }
    </style>

  </head>

  <body ng-controller="TestAnimation" ng-app="TestAnimation">
      <button appendaroo>Fade in/out</button>
  </body>

</html>

I'm rather new to Angular and I figure I'm just missing something, so apologies if this is a crazy stupid question. But there don't seem to be a lot of resources available for utilizing $animate in your own directives.

I am able to use $animate.addClass and $animate.removeClass without problem, which is helpful, and suggests that I'm on the right track, but enter and leave are giving me problems.

I put the example on Punker:

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

||||||
  • As a side note, the $animate API docs don't make it super clear, but you need either a parent or after. So in your code, this should work: animate.enter(box, null, element, function() { ... }. (If you look at the source of ngRepeat, you'll see this done there). – Izhaki Jul 22 '14 at 21:26
14

To use the ngAnimate module you need to add it as a dependency to your module:

var app = angular.module('plunker', ['ngAnimate']);

The reason you aren't getting any exceptions is that the base module contains an $animate service with a default implementation as described in the documentation (a bit confusing yes):

Default implementation of $animate that doesn't perform any animations, instead just synchronously performs DOM updates and calls done() callbacks.

In order to enable animations the ngAnimate module has to be loaded.

To see the functional implementation check out src/ngAnimate/animate.js

With the ngAnimate module added as a dependency your code will still not behave as you hope. This however is because of something totally different and not really related to the $animate service:

.on() is a jQuery method included in Angular's jqLite. The code inside the attached event handler lives outside of Angular, so you need to use $apply:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

Wrap your $animate calls like this and your code will work fine:

scope.$apply(function () {
  $animate.enter(box, parent, element, function() {
    console.log("Done entering");
  });
});

scope.$apply(function () {
  $animate.leave(box, function() {
    console.log("Done leaving");
  });
});

Demo: http://plnkr.co/edit/iWHBNyKfwiSUUFKrMQff?p=preview

||||||
  • Thanks for the answer. I included the module and now a box is added, but never removed. As the code is written now (same link, now with ngAnimate added), a box appears but never gets removed. The callback functions never fire. And of course, the animations don't run, because the ng-enter, et. al. classes are never added. What I'm expecting to happen is: you click the button, a box fades in. You click it again, the box fades out. Repeat. – drukepple Mar 17 '14 at 20:39
  • Much obliged! There are so many pieces to this Angular puzzle...thank you for helping it fit together a little bit better in my head. (I'd upvote you but my reputation is unfortunately lacking) – drukepple Mar 18 '14 at 2:05
  • I spent well over an hour trying to figure out why my animate stuff wasn't working. Adding ngAnimate as a dependency fixed the problem. – Martyn Chamberlin Feb 6 '15 at 17:48
  • as of Angular 1.4.0 you do not need to wrap your $animate.enter or $animate.leave into scope.$apply – Dmitry Efimenko Apr 21 '15 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.