AngularJS $animate.enter not adding ng-enter and ng-enter-active classes
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:
Answer
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");
});
});