AngularJS:动画幻灯片

时间:2014-08-05 16:23:41

标签: angularjs

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

我尝试使用角度动画并尝试添加.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>

1 个答案:

答案 0 :(得分:0)

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 我还没有让动画工作得很顺利(它有点生涩),但你可以摆弄它,因为它实际上是动画。