Question

如果我有一个由ng-repeat指令生成的div列表：

<div class='carousel-item' ng-repeat="item in home.carouselItems">
    <img ng-src='{{item.icon}}' />
</div>

并且每2秒在控制器指令中重新排列项目列表：

link: function(scope, elem, attrs) {
    //timeout is needed so that the ng-repeat items can render
    $timeout(function(){
        $interval(function(){
            scope.home.carouselItems.push(scope.home.carouselItems.shift())
        }, 2000);
    });
}

重新排列弹出第一个项目并将其追加到最后，我想为div元素的位置变化设置动画。在视觉上，div堆叠如下：

| Div 1 |

| Div 2 |

| Div 3 |

等

所以Div 2将被删除并附加到最后，而Div 2和＆amp; 3应该激活他们的位置。

我需要的是一种纯粹的CSS动画方式，不仅可以改变位置，还可以动画不透明度。到目前为止，我已经能够提出：

&.ng-move,
&.ng-enter,
&.ng-leave {
    transition:all linear 0.5s;
}

&:nth-child(1) {
   &.ng-move.ng-move-active {
       opacity: 0.5;
   }
}

其中&是.carousel-item类。

有一些问题。首先，ng-repeat项目跳转到没有位置动画的新位置，然后第一个元素的不透明度淡化开始。其次，在不透明度动画完成后，该项目会跳回到原来的不透明度。

我想要实现的是类似旋转木马的效果，其中第一个项目滚动并淡化，然后从列表中删除，第二个项目渐渐变为0.5不透明度，同时移动第一个点，依此类推。

我注意到其他有趣的东西;我为carousel-item类注册了动画，并且在修改数组时仅调用了move，而不是leave或enter。我怀疑那是因为我正在使用shift()。

角度ng重复动画位置变化

0 个答案: