我有一段 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 动画的东西吗? 任何帮助将不胜感激。
最佳答案
.fadeIn()
仅适用于具有 display:none
的元素,因此您应该在应用 fadeIn
效果之前.hide()
它们。
此外,您没有调用 done
函数——它缺少 ()
。但是,由于这是您在回调中唯一要做的事情,因此将它作为回调传递给淡入淡出动画会更容易。
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)。
关于javascript - Angular JS Javascript 动画淡入不适用于新添加的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23871261/