jiangguo jiangguo 翻译于 2年前 1人顶 顶 翻译的不错哦! ng-repeat 动画   在你可以选择使用的指令里面，ng-repeat是一个非常重要的指令。还有两个基本 的操作指令是过滤和排序。根据执行的操作添加，移动，或者移除相应的指令。   下面演示使用一些基本的动画，当发生变化的时候你就可以看到相应的动画效果。     courseAppAnimations.animation('.repeat-animation',function () {   return {     enter : function(element,done) {       console.log("entering...");       var width = element.width();       element.css({         position: 'relative',        left: -10,        opacity: 0       });       element.animate({         left: 0,        opacity: 1       },done);     },    leave : function(element,done) {       element.css({         position: 'relative',        opacity: 1       });       element.animate({         left: -10,        opacity: 0       },    move : function(element,done) {       element.css({         left: "2px",        opacity: 0.5       });       element.animate({         left: "0px",done);     }   }; }); 小檀 小檀 翻译于 2年前 2人顶 顶 翻译的不错哦! Ng-hide动画   ng-hide指令用于添加或移除目标元素的ng-hide样式类。 为了使用某个动画，我们经常需要添加或移除css样式。 将类名传递给动画处理类来实现这个效果。 这可以让我们检查这个类，对代码进行适当的修改。 下面是一个动画的示例代码，用ng-hide指令实现元素的渐隐渐显效果：   courseAppAnimations.animation('.hide-animation',function () {   return {     beforeAddClass : function(element,className,done) {       if (className === 'ng-hide') {         element.animate({           opacity: 0         },500,done);       } else {         done();       }     },    removeClass : function(element,done) {       if (className === 'ng-hide') {       element.css('opacity',0);       element.animate({           opacity: 1         },done);       } else {         done();       }     }   }; }); daxiang daxiang 翻译于 2年前 0人顶 顶 翻译的不错哦! 让自定义指令动起来 为了让自定义指令产生动画效果，我们需要用到$animate 这个服务。尽管$animate服务 是AngularJS核心框架的一部分，也需要加载ngAnimate后才能让这个服务发挥最大的作用。 使用上一篇文章中同样的例子，我们将展现一页课程列表。我们创建一条指令来显示格子中课程的细节内容，并且格子中的内容会在点击"View Statistics"这个链接时改变。让我们添加一种动画来把这个转换效果呈现给用户。 当转换动画开始的时候，我们将添加一个CSS类标记，结束时，移去这个类标记。以下是针对这个指令的示例代码：   app.directive('courseDetails',function ($animate) {       return {         scope: true,        templateUrl: 'courseDetails.html',        link: function (scope,elem,attrs) {           scope.viewDetails = true;           elem.find('button').bind('click',function () {             $animate.addClass(elem,"switching",function () {               elem.removeClass("switching");               scope.viewDetails =! scope.viewDetails;               scope.$apply();         });       });     }   }; }); jiangguo jiangguo 翻译于 2年前 1人顶 顶 翻译的不错哦! 正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：   .det-anim.switching {   transition: all 1s linear;   position: relative;   opacity: 0.5;   left: -20px; } 又或者，这里有一个jQuery写的动画，可以用于同样的指令：   courseAppAnimations.animation('.js-anim',function () {   return {     beforeAddClass: function(element,done) {       if (className === 'switching') {         element.animate({           opacity: 0         },function (){           element.css({             opacity: 1           });           done();         });       }       else {         done();       }     }   } }); 这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：