Login/Register
AngularJS $animate.enter not adding ng-enter and ng-enter-active classes
Asked Answered
Solved javascriptangularjsanimationangularjs-directiveng-animate
S

1

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="[email protected]" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
    <script data-require="[email protected]" 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

Shingle answered 17/3, 2014 at 17:25 Comment(1)
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). – Isahella
W
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

Williamwilliams answered 17/3, 2014 at 17:56 Comment(4)
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. – Shingle
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) – Shingle
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. – Bontebok
as of Angular 1.4.0 you do not need to wrap your $animate.enter or $animate.leave into scope.$apply – Prizewinner

© 2022 - 2024 — McMap. All rights reserved.