我有一个使用ng-repeat的项目的动态列表.当有事情发生时,项目可能会消失.我已经处理顺利地动画,删除这些项目使用动画,但在它们消失后,其余的项目只是抓住他们的新职位.如何平稳运动这个动作？
我已经尝试对重复的类应用“全部”转换,并且使用ng-move并没有成功.
您可以通过动画max-height属性来实现此目的.查看此示例：
您需要为max-height选择足够高的值(在我的示例中,我使用了90px).当一个项目最初被添加时,你希望它开始与0高度(我也动画左边使项目从左侧幻灯片,以及不透明度,但如果他们不jibe可以删除这些你在做什么)：
.repeated-item.ng-enter {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
max-height: 0;
opacity: 0;
left: -50px;
}
然后,您可以在ng-enter-active规则中设置这些属性的最终值：
.repeated-item.ng-enter.ng-enter-active {
max-height: 90px;
opacity: 1;
left: 0;
}
删除项目有点棘手,因为您将需要使用基于关键帧的动画.再次,你想要动画max-height,但是这次你想要以90px开始,并将其减小到0.当动画运行时,项目将缩小,并且所有以下项目将顺利滑动.
首先,定义您将要使用的动画：
@keyframes my_animation {
from {
max-height: 90px;
opacity: 1;
left: 0;
}
to {
max-height: 0;
opacity: 0;
left: -50px;
}
}
(为了简洁起见,我在这里省略了供应商特定的定义,@ -webkit-keyframes,@ -moz-keyframes等 – 查看上面的jsfiddle的完整示例.)
然后,声明您将使用此动画进行ng-leave,如下所示：
.repeated-item.ng-leave {
-webkit-animation:0.5s my_animation;
-moz-animation:0.5s my_animation;
-o-animation:0.5s my_animation;
animation:0.5s my_animation;
}
基本
如果有人正在努力弄清楚如何获得AngularJS动画,所以这里是一个缩写的指南.
首先,要启用动画支持,您需要在加载angular.js之后添加一个附加文件angular-animate.js.例如.：
<script type="text/javascript" src="angular-1.2/angular.js"></script> <script type="text/javascript" src="angular-1.2/angular-animate.js"></script>
接下来,您将需要通过将ngAnimate加载到模块的依赖关系列表(在第2个参数中)来加载：
var myApp = angular.module('myApp',['ngAnimate']);
然后,将类分配给您的重复项目.您将使用此类名来分配动画.在我的示例中,我使用重复项作为名称：
<li ng-repeat="item in items" class="repeated-item">
然后,您可以使用重复项目类定义CSS中的动画,以及Angular在添加,删除或移动时添加到项目中的特殊类别ng-enter,ng-leave和ng- move周围.
AngularJS动画的官方文档在这里：
