如何在 Angular 1.2 中使用 ng-animate？答案

【问题标题】：How to use ng-animate in angular 1.2?如何在 Angular 1.2 中使用 ng-animate？
【发布时间】：2014-02-06 00:51:29
【问题描述】：

基础

角度 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - 工作

更新

角度 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - 失败

我想我确实按照文档中的说明进行操作 - http://docs.angularjs.org/api/ngAnimate

• 首先在您的 HTML 中包含 angular-animate.js

• 然后通过将模块添加为依赖模块将其加载到您的应用程序中

在我的时区已经很晚了，我可能会错过一些明显的东西。我的猜测是 - 1.1.5 和 1.2.6 之间的 CSS 文件不兼容？说不出来……

无论如何，这里是 upped plunker 的代码形式，我包含了一些 cmets 以强调我遵循了文档中的说明：

<!doctype html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="http://code.angularjs.org/1.2.6/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
  <!-- ^^^ load animate -->
</head>

<script>
var app = angular.module('app', ['ngAnimate']); // <-- dependent module

app.controller('Ctrl', function($scope) {
  $scope.names = ['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];
});

</script>

<body ng-controller="Ctrl">
  <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
    <form class="form-search"> 
        <div class="input-append">
          <input type="text" ng-model="search" class="search-query" style="width: 80px">
          <button type="submit" class="btn">Search</button>
        </div>
        <ul class="nav nav-pills nav-stacked">
          <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
            <a href="#"> {{name}} </a>
          </li> 
      </ul>
    </form>
  </div>
</body>
</html>

非常感谢您的帮助！

【问题讨论】：

标签： javascript angularjs ng-animate

【解决方案1】：

这是你的 plunker 的工作版本...http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview

在 Angular 1.2+ 中，您不再需要声明 ng-animate 指令。动画可以单独使用 css 添加。所以对于你的例子，你可以删除 ng-animate 指令并给元素一个 css 类，所以改变......

<li ng-animate="'animate'" ng-repeat="name in names | filter:search">

to...

<li class="animate" ng-repeat="name in names | filter:search">

然后将您的 css 更新为 ...

.animate.ng-enter, 
.animate.ng-leave
{ 
...

.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
...

.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
...

Angular 会简单地将 ng-enter、ng-hide、ng-leave.. 等类添加到元素中，并在动画生命周期中适当地删除它们，这将触发 css 动画。在“Usage”下的docs 中有一个哪些指令支持哪些动画类的列表。在此示例中，我们正在为 ng-repeat 设置动画，因此 ng-enter、ng-leave 和 ng-move 类将在适当的时候添加到我们的元素中，我们可以使用 css 将动画附加到它们。

【讨论】：

谢谢！像魅力一样工作...我应该提到 nganimate.org 目前指的是 1.1.5 - 我发现从事发展如此迅速的技术是令人兴奋的！
一个赞成票不足以表达我的感激之情。不知何故，这个答案出人意料地难以找到，因为那里有大量带有旧信息的例子。谢谢！

【解决方案2】：

我发现这个演示做得很好： http://jsbin.com/usaruce/3/edit

它使用以下语法：

.todo-item {
  -webkit-transition: color 0.6s, background-color 0.3s;
  -moz-transition: color 0.6s, background-color 0.3s;
  -ms-transition: color 0.6s, background-color 0.3s;
  transition: color 0.6s, background-color 0.3s;
}
.todo-item.ng-enter {
  -webkit-animation: fadeInLeft 1s;
  -moz-animation: fadeInLeft 1s;
  -ms-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}
.todo-item.ng-leave {
  -webkit-animation: bounceOut 1s;
  -moz-animation: bounceOut 1s;
  -ms-animation: bounceOut 1s;
  animation: bounceOut 1s;
}

它还利用了animate.css (fadeInLeft,bounceOut)

【讨论】：