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");
});
});