anglejs – 如何删除剩余的ng重复项目的动作？

我有一个使用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动画的官方文档在这里：

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

原文地址：https://www.jb51.cc/angularjs/140757.html

anglejs – 如何删除剩余的ng重复项目的动作？

相关推荐