使用| AngularJS, ngAnimate来动画ng-repeat的子元素

Animate children of ng-repeat using | AngularJS, ngAnimate

本文关键字：ng-repeat 元素 动画 AngularJS ngAnimate 使用      更新时间：2023-09-26

我能找到的唯一相关的答案是这个，但我在这个答案中找不到安慰。我试图动画元素的一个重复组的孩子，但失败的悲惨，尝试了各种组合的ng-enter ng-enter- activities等，但似乎不能得到我想要的效果。

html: 

<div ng-repeat="ex in [1,2,3,4]" class="outer">
    <div class="inner"></div>
</div>
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;
    }

我只是想让ng-repeat的子元素在加载时动画。这是小提琴，如果有人帮忙的话，我将非常感谢。

您可以使用指令:

myApp.directive('animm',function($timeout){
    return {
        link: function(scope, el, attrs){
            $timeout(function(){
                el.addClass('readyy');
            }, 100);
        }
    };
});
CSS: 

.inner{
    transition:1s linear all;
    width: 20px;
    height:20px;
    background-color:red;
}
.outer.readyy .inner{
    width:100px;
}

甚至可以对作用域id做一些欺骗来抵消它们?参见fiddle update

http://jsfiddle.net/j0p3r495/5/

相关文章：