replace jQuery animation with built in angular animation - angularjs

Question

Given this template:
<div fade>
<h2>
TEST {{ headline.Title }}
</h2>
</div>
And the following directive:
How do I change this directive to replace the jquery fade with built in angular animations?
I require the text to fade out, get replaced, and then fade in.
newman.directive('fade', ['$interval', function($interval) {
return function ($scope, element, attrs) {
$scope.index = 0;
$scope.news = $interval(function () {
// REPLACE JQUERY BELOW
$(element).fadeOut('fast', function() {
$scope.index = $scope.getValidNewHeadlineIndex();
// view is currently correctly updated by the line below.
$scope.headline = $scope.headlines[$scope.index];
$(element).fadeIn('slow'); // REPLACE JQUERY HERE TOO!
});
}, 10000);
}
}]);

Answer 1

Figured it out, mostly...
This is for anyone else battling with angular-js animation. A working CODEPEN.
The basic procedure is to create some CSS to create the animation, and add a call to $animate.enter(... to the 'fade' directive.
$animate.leave doesn't seem to be required. I will add more detail when I know more.
the modified directive:
app.directive('fade', ['$animate', '$interval', function($animate, $interval) {
return function ($scope, element, attrs) {
$interval(function () {
$animate.enter(element, element.parent());
$scope.headline = $scope.next();
/* $animate.leave(element); */ // not required?
}, 6000);
}
}]);
the style sheet entries:
.fade {
transition: 2s linear all;
-webkit-transition: 2s linear all;
}
.fade.ng-enter {
opacity: 0;
}
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
alternate solution, using TweenMax
This solution is suitable for (you guessed it - internet explorer < 10)
TweenMax solution using onComplete.
app.directive('fade', ['$animate', '$interval', function($animate, $interval) {
var fadeOut = function(target, done){
TweenMax.to(
target, 0.2,/*{'opacity':'1',ease:Ease.linear},*/
{'opacity':'0',ease:Ease.linear, onComplete:done });
};
var fadeInUp = function(target){
var tl = new TimelineMax();
tl.to(target,0,{'opacity':'0',top:'+=50'})
.to(target,1,{'opacity':'1',top:'-=50',ease:Quad.easeOut});
};
return function ($scope, element, attrs) {
$interval(function () {
fadeOut(element, function() {
$scope.$apply(function() {
$scope.headline = $scope.next();
fadeInUp(element);
});
});
}, 4000);
}
}]);