用内置的角度动画替换jQuery动画 [英] replace jQuery animation with built in angular animation

问题描述

给出此模板：

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

以及以下指令：
如何将此指令更改为 replace jquery 淡入淡出并内置 angular 动画？

And the following directive: How do I change this directive to replace the jquery fade with built in angular animations?

我需要文本淡入淡出

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

推荐答案

基本上可以理解...

这是为任何使用angular-js动画而战的人的。有效的 CODEPEN 。

This is for anyone else battling with angular-js animation. A working CODEPEN.

基本程序是创建一些CSS来创建动画，然后将 $ animate.enter（... 的调用添加到'fade'指令。

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 似乎不是必需的，我将添加

$animate.leave doesn't seem to be required. I will add more detail when I know more.

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

备用解决方案，使用TweenMax

此解决方案适合（您猜对了-Internet Explorer< 10）

使用onComplete的TweenMax解决方案。

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

这篇关于用内置的角度动画替换jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！