[英]Animate children of ng-repeat using | AngularJS, ngAnimate
The only answer related I could find was this but I found no comfort in the answer. 我能找到的唯一与之相关的答案是这个,但我没有在答案中感到安慰。 I'm trying to animate the child of an ng-repeat group of elements but failing miserably, tried various combinations of ng-enter ng-enter-actives etc but cant seem to get my desired effect.
我正在尝试为一组ng重复元素的孩子设置动画,但失败了,尝试了ng-enter ng-enter-actives等的各种组合,但似乎无法达到我想要的效果。
html: HTML:
<div ng-repeat="ex in [1,2,3,4]" class="outer">
<div class="inner"></div>
</div>
css CSS
.inner{
transition:1s linear all;
}
.outer.ng-enter .inner{
width:1px;
}
.outer.ng-enter-active .inner{
width:100px;
}
.outer.ng-active .inner{
width:100px;
}
I'm just trying to get the child of ng-repeat to animate on load. 我只是想让ng-repeat的孩子在加载时进行动画处理。 Here is a fiddle I'd appreciate any help.
这是一个小提琴,我将不胜感激。
You can do it with a directive: 您可以使用指令执行此操作:
myApp.directive('animm',function($timeout){
return {
link: function(scope, el, attrs){
$timeout(function(){
el.addClass('readyy');
}, 100);
}
};
});
CSS: CSS:
.inner{
transition:1s linear all;
width: 20px;
height:20px;
background-color:red;
}
.outer.readyy .inner{
width:100px;
}
Could even do some trickery with the scope id to offset them? 甚至可以对范围ID进行一些欺骗以抵消它们吗? See fiddle update
查看小提琴更新
http://jsfiddle.net/j0p3r495/5/ http://jsfiddle.net/j0p3r495/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.