Question

我正在尝试创建一个旋转木马，其中我将懒洋洋地加载数据。我想要的是，当我添加一组新数据时，它应该在正常的轮播中滑动。

我尝试使用角度动画并尝试添加.enter，.leave 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 我还没有让动画工作得很顺利（它有点生涩），但你可以摆弄它，因为它实际上是动画。

AngularJS：动画幻灯片

1 个答案: