Geek Answers Handbook

AngularJS $ animate.enter does not add ng-enter and ng-enter-active classes

I am trying to include the $animate service in my own directive. I can not enter and leave to actually revive.

The strange thing is that with $animate.enter element is added to the DOM and the callback function is triggered. But it seems that the classes ng-animate , ng-enter and ng-enter-active never added. An element is simply added to the DOM without animation. The callback function fires, but it fires instantly, and not after the duration of the animation that should happen. The same thing happens with leave ; the element is immediately removed from the DOM, and the callback is launched 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 am new to Angular and I suppose I just missed something, so I apologize if this is a crazy dumb question. But there does not seem to be a lot of resources for using $animate in your own directives.

I can use $animate.addClass and $animate.removeClass without problems, which is useful, and assumes that I am on the right track, but enter and leave give me problems.

I will give an example in Punker:

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

+7
javascript angularjs animation angularjs-directive ng-animate
source share
1 answer

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

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

The reason you don't get any exceptions is because the base module contains the $animate service with a standard implementation, as described in the documentation (a bit confusing yes):

The default implementation of $ animate, which does not perform animations, instead simply performs DOM updates and done () calls synchronously.

To enable animation, you must download the ngAnimate module.

To check the functional implementation check SRC / ngAnimate / animate.js

If the ngAnimate module ngAnimate added as a dependency, your code will still not behave as you expect. However, this is due to something completely different and not related to the $animate service:

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

$ apply () is used to execute an expression in Angular from outside Angular. (For example, from browser events DOM, setTimeout, XHR or third-party libraries). Because we call the Angular structure, we need to execute the correct life cycle of exception handling, clock execution.

Wrap $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

+14
source share

More articles:


All Articles