当一个剩余的 ng-repeat 项目被移除时，如何动画它的移动? [英] How can I animate the movement of remaining ng-repeat items when one is removed?

问题描述

我有一个使用 ng-repeat 的动态项目列表.当某事发生时，项目可能会消失.我已经使用 ng-animate 平滑地处理了移除这些项目的动画，但是在它们消失后，剩余的项目只是简单地捕捉到它们的新位置.我怎样才能流畅地为这个动作设置动画?

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-move 没有成功.

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

推荐答案

您可以通过为 max-height 属性设置动画来实现此目的.查看此示例:

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

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

您需要为 max-height 选择一个足够高的值(在我的示例中，我使用了 90px).当一个项目最初被添加时，你希望它从 0 高度开始(我也在动画 left 以让项目从左侧滑入，以及 opacity，但如果它们不符合您正在做的事情，您可以删除它们):

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-enter-active 规则中为这些属性设置最终值:

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

项目移除有点棘手，因为您需要使用基于关键帧的动画.同样，您想要为 max-height 设置动画，但这次您想从 90px 开始并将其减小到 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-keyframes、@-moz-keyframes 等 - 查看 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-leave 中使用此动画，如下所示:

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.

首先，要启用动画支持，您需要包含一个附加文件 angular-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 添加到模块的依赖项列表(在第二个参数中)来加载它:

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']);

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

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">

然后，您使用 repeated-item 类以及特殊类 ng-enter、ng-leave<在 CSS 中定义动画/code> 和 ng-move Angular 在项目被添加、删除或移动时添加到项目中.

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-repeat 项目被移除时，如何动画它的移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！