如何删除剩余的重复项目时,如何设置其动画的动画？

Question

我有一个动态的项目列表使用ng-repeat.当事情发生时,物品可能会消失.我已经使用ng-animate平滑地处理了这些项目的移除动画,但是在它们消失之后,剩下的项目只是简单地捕捉到它们的新位置.我怎样才能顺利地为这个动作制作动画？

我已经尝试将"全部"转换应用于重复的类并使用ng-move但没有成功.

Answer 1

您可以通过设置动画来实现此目的max-height.看看这个样本:

http://jsfiddle.net/k4sR3/8/

你需要选择足够高的值max-height(在我的样本中,我使用了90px).当一个项目最初被添加时,你希望它从0高度开始(我也想让left项目从左边滑入,以及opacity如果它们不与什么相符合你可以删除它们)你在做):

.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-animate.js,之后您加载angular.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通过将其添加到模块的依赖项列表(在第二个参数中)来加载:

var myApp = angular.module('myApp', ['ngAnimate']);

然后,为您的ng-repeat项目分配一个类.您将使用此类名来分配动画.在我的示例中,我使用repeated-item了名称:

<li ng-repeat="item in items" class="repeated-item">

然后,您可以定义CSS动画中使用repeated-item类,以及特殊的班级ng-enter,ng-leave和ng-move当被添加它,删除或四处移动角度增加了项目.

AngularJS动画的官方文档在这里:

http://docs.angularjs.org/guide/animations