javascript - Angular JS Javascript 动画淡入不适用于新添加的项目

Question

我有一段 html，它显示具有特定结构的列表中的项目。我想根据某些用户交互将新推送的项目淡化到 $scope 列表中。我正在使用 $animate 服务并将 ngAnimate 注入(inject)到应用程序中。

var app = angular.module('plunker',['ngAnimate'])
.animation('.esnfadein',function(){
    return{
          enter:function(element,done){
              jQuery(element).fadeIn(800,function(){
              done;
              });
          },        

          leave:function(element,done){
              jQuery(element).fadeIn(800,function(){
              done;
              });
          }
     };
});

该类应用于 html 如下:

<div ng-repeat="item in items" class="esnfadein">...</div>

这是 plunker的工作代码。淡入不工作，而淡出工作正常。我在这里遗漏了一些专门适用于 Angular JS 中的 Javascript 动画的东西吗？任何帮助将不胜感激。

Answer 1

.fadeIn()仅适用于具有 display:none 的元素，因此您应该在应用 fadeIn 效果之前.hide() 它们。

此外，您没有调用 done 函数——它缺少 ()。但是，由于这是您在回调中唯一要做的事情，因此将它作为回调传递给淡入淡出动画会更容易。

Plunker

app.animation('.esnfadein',function(){
  return{
    enter: function(element,done){
      jQuery(element).hide().fadeIn(800, done);
    },
    leave: function(element,done){
      jQuery(element).fadeOut(800, done);
    }
  };
});

---

注意:也可以在没有任何 jQuery 的情况下使用 CSS3 Transitions 执行此操作。 animations docs 中有一个示例(plunker)。