Absolutely, you have the ability to achieve this using the $animate service. Typically, this would be implemented within a custom directive. An example of a simple animation scenario would be triggering an element's animation on click. For instance, removing an element with a specified animation using .ng-leave and passing a callback.
app.directive('leaveOnClick', function($animate) {
return {
scope: {
'leaveOnClick': '&'
},
link: function (scope, element) {
scope.leaveOnClick = scope.leaveOnClick || (function() {});
element.on('click', function() {
scope.$apply(function() {
$animate.leave(element, scope.leaveOnClick);
});
});
}
};
});
This directive could be utilized as follows:
<div class="my-div" leaveOnClick="done()">Click to remove</div>
To fade out the element via CSS, you can use the following styles:
.my-div.ng-leave {
opacity: 1;
transition: opacity 1s;
-webkit-transition: opacity 1s;
}
.my-div.ng-leave.ng-leave-active {
opacity: 0;
}
You can view the above animation in action on this Plunker.
However, ngIf does not offer any built-in callbacks to work with that I am aware of. Therefore, you would need to create your own directive. Below is a reference to a modified version of ngIf, originally sourced from the ngIf source code, which has been renamed to animatedIf. Usage example:
<div class="my-div" animated-if="shown" animated-if-leave-callback="leaveDone()" animated-if-enter-callback="enterDone()" >Some content</div>
The key difference here is the addition of a 'scope' parameter to pass in the necessary callbacks:
scope: {
'animatedIf': '=',
'animatedIfEnterCallback': '&',
'animatedIfLeaveCallback': '&'
},
Additionally, the calls to $animate.enter and $animate.leave have been adjusted to call these callbacks after animations:
var callback = !oldValue && $scope.animatedIfEnterCallback ? $scope.animatedIfEnterCallback : (function() {});
$animate.enter(clone, $element.parent(), $element, callback);
$animate.leave(block.clone, ($scope.animatedIfLeaveCallback || (function() {})));
An isolated scope is created due to the 'scope' parameter, requiring changes when transcluding the content. Another modification involves creating and utilizing a child scope from the directive's $parent scope:
childScope = $scope.$parent.$new();
For more details and the complete source of the modified ngIf directive, refer to this Plunker. Please note this has only undergone limited testing.
There may exist simpler alternatives, potentially by not fully recreating the ngIf directive but instead crafting one with a template that incorporates the original ngIf within additional wrapper divs, like so:
template: '<div><div ng-if="localVariable"><div ng-transclude></div></div></div>'