我怎样才能动画剩余NG-重复物品的移动，当一个被删除？ [英] How can I animate the movement of remaining ng-repeat items when one is removed?

问题描述

我在使用NG重复项目的动态列表。当事情发生的项目可能会消失。我已经处理动画顺利拆除采用NG-动画这些项目，但他们都走了之后，剩余的项目只是捕捉到新的位置。我怎样才能顺利动画这个运动？

I have a dynamic list of items using ng-repeat. When something happens an item may disappear. I have handled smoothly animating the removal of these items using ng-animate, but after they are gone, the remaining items simply snap to their new position. How can I animate this movement smoothly?

我试过将一个全过渡到重复的类和使用NG-举动没有成功。

I've tried applying an "all" transition to the repeated class and using ng-move with no success.

推荐答案

您可以通过动画的最大高度属性实现这一目标。看看这个例子：

You can achieve this by animating the max-height property. Check out this sample:

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

您需要挑选一个足够高的值最大高度（我的示例中，我用90像素）。当最初被添加一个项目，你想让它与0的高度开始（我也动画离开来在从左边的项目幻灯片，以及透明度，但你可以删除这些，如果他们不与你在做什么嘲弄）：

You will need to pick a sufficiently high value for max-height (in my sample, I used 90px). When an item is initially being added, you want it to start off with 0 height (I'm also animating left to have the item slide in from the left, as well as opacity, but you can remove these if they don't jibe with what you're doing):

.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-进入活性规则：

.repeated-item.ng-enter.ng-enter-active {
    max-height: 90px;
    opacity: 1;
    left: 0;
}

项删除是有点麻烦，因为你需要使用基于关键帧的动画。再次，要进行动画最大高度，但这个时候你想在90像素开始关闭，降低下来到0。动画运行，该项目将萎缩，和所有的下列项目将平稳向上滑动。

Item removal is a bit trickier, as you will need to use keyframe-based animations. Again, you want to animate max-height, but this time you want to start off at 90px and decrease it down to 0. As the animation runs, the item will shrink, and all the following items will slide up smoothly.

首先，定义您将使用动画：

First, define the animation that you will be using:

@keyframes my_animation {
  from {
    max-height: 90px;
    opacity: 1;
    left: 0;
  }
  to {
    max-height: 0;
    opacity: 0;
    left: -50px;
  }
}

（为简便起见，我在这里省略了供应商特定的定义， @ - WebKit的关键帧， @ - MOZ关键帧，等等 - 检查出上述全部样本的jsfiddle）

(For brevity, I'm omitting the vendor-specific definitions here, @-webkit-keyframes, @-moz-keyframes, etc - check out the jsfiddle above for the full sample.)

然后，声明你将使用该动画 NG-休假如下：

Then, declare that you will be using this animation for ng-leave as follows:

.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动画在所有的工作中挣扎，这里是一个简短的指南。

In case anyone is struggling with figuring out how to get AngularJS animations to work at all, here's an abbreviated guide.

首先，使动画支持，你将需要包括一个额外的文件，角animate.js 的之后的你加载 angular.js 。例如：

First, to enable animation support, you will need to include an additional file, angular-animate.js, after you load up angular.js. E.g.:

<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-重复项。您将使用这个类名来分配动画。在我的示例中，我使用重复项作为名称：

Then, assign a class to your ng-repeat item. You will be using this class name to assign the animations. In my sample, I used repeated-item as the name:

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

然后，您可以定义CSS动画中使用重复项类，以及特殊类 NG-输入， NG-休假和 将被加入NG-此举角增加了项目时，移除或周围移动。

Then, you define your animations in the CSS using the repeated-item class, as well as the special classes ng-enter, ng-leave, and ng-move that Angular adds to the item when it is being added, removed, or moved around.

有关AngularJS动画的官方文档是在这里：

The official documentation for AngularJS animations is here:

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

这篇关于我怎样才能动画剩余NG-重复物品的移动，当一个被删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！