如何在angular 1.2中使用ng-animate？
基础
角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文件不兼容？不能真正告诉…
反正这里是代码形式 调升 plunker，我包括一些意见强调的是，我也跟着从文档的说明：
<!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>
非常感谢您的帮助！
问题答案：
这是您的punker的工作版本…
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动画。在“用法”下的文档中，列出了哪些指令支持哪些动画类。在此示例中，我们为ng-
repeat设置了动画，因此ng-enter，ng-leave和ng-move类将在适当的时候添加到元素中，并且可以使用CSS将动画附加到它们上。
-
我想比较一下id，这里，如果id等于5，做这个，否则做那个。我怎样才能做到这一点？
-
问题内容： 我有一个Person对象数组 我正在使用带有ng-options这样的select： 我想显示与记录 符合条件的：假 的 红 颜色。因此，问题是我如何使用in 才能实现此目的？因为我们没有使用任何标签，如果我只需添加它不会工作在元素本身。 问题答案： 您可以在处理ngOptions指令后创建一个处理选项的指令，以适当的类更新它们。 更新 ：旧代码有一些错误，并且自回答这个问题以来，我学
-
问题内容： “活动”类的CSS来自引导程序。 因此，切换作品几乎是我想要的。我希望它类似于导航链接中的活动状态，但在我的示例中，它处理图像，因此需要担心url字符串等。 我尝试模拟此示例，但没有用（我尝试了相同的图像逻辑）：ng-class突出显示基于ng- repeat的活动菜单项,如果有人能指出我正确的方向，我将不胜感激。：D 问题答案： 在您遇到的情况下，我要做的是在ng-repeat的父范
-
问题内容： 我有一个简单的导航对象设置，其中列出了导航项（以及它们是否应出现在主导航中）。看来，当我尝试将ng-if与ng- repeat混合使用时，情况会分崩离析，但是当我将ng-show与ng- repeat混合使用时，它可以正常工作（但是最后我得到了一堆隐藏的元素，但我没有想要附加到DOM）。 但是以下操作无效（请注意，现在是）： 路线对象看起来像 尝试使用时收到以下错误： 错误：多个指令[
-
问题内容： 我想问你是否可以帮我这个忙。 我在这里用我的问题创建了一个jsfiddle 。我需要使用ng-model =“ my _ {{$ index}}”方式在ng-repeater中动态生成一些带有ng-model的输入。 在jsfiddle中，您可以看到一切正常，直到我尝试动态生成它为止。 HTML将是： 还有javascript … 你能给我个主意吗？ 非常感谢。 问题答案： 它能解决您
-
问题内容： 我有以下html可以使用$ dirty更改输入时起作用并更改div的类： 但是，当我尝试将此变为指令时，它的ng-class部分停止工作。谁能帮助我使其正常运行？ 指示： }）; 该指令的html是： 问题答案： 这是一个小矮人：http ://plnkr.co/edit/3AFOHZFgExZKHjnd3gb0?p=preview 在替换compile函数中的元素时，您应该： 手动编