replace jQuery animation with built in angular ani

问题:

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

回答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);
    }
}]);