Question

我能找到的唯一答案是this但我在答案中找不到任何安慰。我试图为一个ng-repeat元素组的孩子制作动画，但是失败了，尝试了ng-enter ng-enter-actives等的各种组合，但似乎无法达到我想要的效果。

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的孩子在负载下制作动画。 Here is a fiddle我很感激任何帮助。

Answer 1

您可以使用指令：

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做一些技巧来抵消它们？请参阅小提琴更新

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

使用|为ng-repeat的子项设置动画AngularJS，ngAnimate

1 个答案: