AngularJS :设置幻灯片动画

Question

我正在尝试创建一个旋转木马，在其中我将延迟加载数据。我想要的是，当我添加一个新的数据集时，它应该在一个普通的旋转木马中滑动。

我尝试玩角度动画，并尝试添加.enter，.leave css过渡，但它不起作用

FIDDLE HERE css

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}

.animate-enter.animate-enter-active {
    opacity: 1;
}

HTML

 <div ng-repeat="slide in slides"
          ng-animate=" 'animate' " >
             <img ng-src="{{slide.image}}" style="float:left; padding: 10px;"></img>
    </div>

Answer 1

Angular 1.2+使用了不同的语法，如下所示：

<div class="animate" ng-repeat="slide in slides">

您还需要将css更改为如下所示：

.animate.ng-enter, 
.animate.ng-leave
{ 
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}
.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
    opacity: 1;
}
.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
    opacity: 0;

}

fiddle is here我还没有让动画工作得很流畅(它有点抖动)，但是你现在可以摆弄它了，因为它实际上是动画。