用内置的角度动画替换 jQuery 动画答案

【问题标题】：replace jQuery animation with built in angular animation用内置的角度动画替换 jQuery 动画
【发布时间】：2014-07-22 20:11:21
【问题描述】：

鉴于此模板：

<div fade>
    <h2>
    TEST {{ headline.Title }}
    </h2>
</div>

还有以下指令：如何更改此指令以使用内置 angular 动画替换 jquery 淡入淡出？

我需要文本淡出、被替换，然后淡入。

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

【问题讨论】：

您是否将 ng-animate 添加到 angular.module 中？
我已将问题更改为更简洁（我希望如此）。使用可以更改为使用 CSS / AngularJS 的 jQuery 示例。周围有一些例子，但我找不到在两个动画之间挤压视图变化的例子。淡出、更改视图、淡入...
我真的希望这会被抢走并迅速回答。有没有人对编辑问题有一些建议，以使其对经验丰富的 angularjs 编码员更具吸引力......

标签： angularjs animation

【解决方案1】：

想通了，主要是……

这适用于其他与 angular-js 动画作斗争的人。一个工作的CODEPEN。

基本过程是创建一些 CSS 来创建动画，并在 'fade' 指令中添加对 $animate.enter(... 的调用。

$animate.leave 似乎不是必需的。当我知道更多时，我会添加更多细节。

修改后的指令：

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

样式表条目：

.fade {
    transition: 2s linear all;
    -webkit-transition: 2s linear all;
}
.fade.ng-enter {
    opacity: 0;
}
.fade.ng-enter.ng-enter-active {
    opacity: 1;
}

替代解决方案，使用 TweenMax

此解决方案适用于（您猜对了 - Internet Explorer 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);
    }
}]);

【讨论】：