如何移除剩余的ng-repeat项目的动画？ [英] How can I animate the movement of remaining ng-repeat items when one is removed?

问题描述

我有一个使用ng-repeat的动态项列表。当某事发生时，项目可能会消失。我已经使用ng-animate来平滑地处理这些项目的移除，但是在它们消失之后，剩下的项目就简单地捕捉到它们的新位置。

我尝试对重复的类应用全部转换，并使用ng-move没有成功。

解决方案

您可以通过动画 max-height 属性来实现。查看此示例：

http：// jsfiddle。 net / k4sR3 / 8 /

您需要为 max-height （在我的示例中，我使用90px）。当一个项目最初被添加时，你想要它从0开始高度（我也动画左让项目从左边滑动，以及 opacity ，但你可以删除这些，如果他们不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; 
} 
  

然后，在<$ c $中设置这些属性的最终值c> ng-enter-active 规则：

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

项目删除有点棘手，因为您将需要使用基于关键帧动画。再次，你想动画 max-height ，但这次你想从90px开始减少到0.随着动画运行，项目会收缩，

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

<$> p $ p> @keyframes my_animation {
from {
max-height：90px;
opacity：1;
left：0;
}
到{
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; 
} 
  

---

/ strong>

如果有人想知道如何让AngularJS动画工作，这里有一个简短的指南。

首先，要启用动画支持，您需要在之后添加一个附加文件 angular-animate.js ，加载 angular.js 。例如：

 < script type =text / javascriptsrc =angular-1.2 / angular.js> ; / script> 
< script type =text / javascriptsrc =angular-1.2 / angular-animate.js>< / script> 
  

接下来，您需要加载 ngAnimate 通过将它添加到模块的依赖项列表（在第二个参数中）：

  var myApp = angular.module '，['ngAnimate']）; 
  

然后，为您的 ng-repeat 项。您将使用此类名称分配动画。在我的示例中，我使用 repeated-item 作为名称：

  < li ng-repeat =item in itemsclass =repeated-item>然后，使用 repeated-item 在CSS中定义动画。   / code>类，以及特殊类 ng-enter ， ng-leave  
 
 
 
正在加载，移除或移动的项目的code> ng-move  AngularJS动画的文档如下：
 
 
 
  http：/ /docs.angularjs.org/guide/animations  
 
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?

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/

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;
}
Then, you set the final values for these properties in the ng-enter-active rule:
.repeated-item.ng-enter.ng-enter-active {
    max-height: 90px;
    opacity: 1;
    left: 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;
  }
}
(For brevity, I'm omitting the vendor-specific definitions here, @-webkit-keyframes, @-moz-keyframes, etc - check out the jsfiddle above for the full sample.)

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;
}




Basics

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

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>
Next, you will need to load ngAnimate by adding it to the list of your module's dependencies (in the 2nd parameter):
var myApp = angular.module('myApp', ['ngAnimate']);
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">
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.

The official documentation for AngularJS animations is here:

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

                        
这篇关于如何移除剩余的ng-repeat项目的动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！