Angular 1.4 中的 ngRepeat 动画答案

【问题标题】：ngRepeat Animation in angular 1.4Angular 1.4 中的 ngRepeat 动画
【发布时间】：2015-09-01 08:05:06
【问题描述】：

我想在 Angular JS 1.4.0 中实现动画，我希望它类似于可以在此页面上找到的动画（Angular 1.1.5）： http://www.nganimate.org/angularjs/ng-repeat/move

据我了解，在过去的几个版本中，ngAnimate 发生了重大变化。

我已经使用 Plunkr 重新创建了我的应用程序的重要部分。可以在这里找到http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

由于不同的过滤器输入，我希望显示和隐藏的项目使用 css 动画进行动画处理。

这是我的过滤器输入：

<input type="text" class="form-control" ng-model="search">

这是一个列表，搜索中的所有元素都显示在其中。

<ul>
    <li ng-class="item" ng-repeat="name in people | filter:search">
         <a href="#"> {{name.name}} </a>
    </li>
</ul>

这是我的 CSS 动画：

.item.ng-enter, 
.item.ng-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.item.ng-enter.item.ng-enter-active, 
.item.ng-leave {
    opacity: 1;
    top: 0;
    height: 30px;
}

.item.ng-leave.item.ng-leave-active,
.item.ng-enter {
    opacity: 0;
    top: -50px;
    height: 0px;
}

搜索和过滤器工作正常，但没有触发 CSS 动画。

如果有人能解决这个问题，我会很高兴的！

【问题讨论】：

我遇到了同样的问题，在 1.4 中，没有为 ng-repeat 添加 ng-enter、ng-leave 等类。

标签： angularjs animation angularjs-ng-repeat ng-animate

【解决方案1】：

像 angular 1.4 这样的最新版本的方法有点不同。首先，您应该包含角度动画 js。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>

那么你应该像这样将'ngAnimate'注入模块。

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

在 ng-repeat 中也可以使用这样的类

<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">

也可以使用 css 制作动画，如下所示

    .animate-repeat {
  line-height:40px;
  list-style:none;
  box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:40px;
}

more references

【讨论】：