如何在 angular 1.2 中使用 ng-animate? - IT屋-程序员软件开发技术分享社区
首页 前端开发 如何在 angular 1.2 中使用 ng-animate?
如何在 angular 1.2 中使用 ng-animate?
[英] How to use ng-animate in angular 1.2?
本文介绍了如何在 angular 1.2 中使用 ng-animate?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
基础 angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - 作品
升级 angular 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，我添加了一些注释以强调我遵循了文档中的说明:
<html ng-app="app"><头><元字符集=utf-8"><title>热门动画</title><script>document.write('<base href="' + document.location + '"/>');</script><link rel="样式表";href="style.css"><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css";rel=样式表"><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><!-- ^^^ 加载动画 --><脚本>var app = angular.module('app', ['ngAnimate']);//<-- 依赖模块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'];});<body ng-controller="Ctrl"><div class="well";style="margin-top: 30px;宽度:200px；溢出:隐藏;><表单类=表单搜索"><div class="input-append"><输入类型=文本"ng-model=搜索"类=搜索查询"样式=宽度:80px"><按钮类型=提交"class="btn">搜索</button> <ul class="nav nav-pills nav-stacked"><li ng-animate="'animate'";ng-repeat="name in names |过滤器:搜索"><a href="#">{{name}} </a></表单>
</html>
非常感谢您的帮助！ 解决方案
这是您的 plunker 的工作版本... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview
在 Angular 1.2+ 中，您不再需要声明 ng-animate 指令.可以单独使用 css 添加动画.因此，对于您的示例，您可以删除 ng-animate 指令并为元素提供一个 css 类，因此更改...
到...<li class="animate" ng-repeat="name in names | filter:search"> 然后将您的 css 更新为 ...
.animate.ng-输入，.animate.ng-离开{....animate.ng-leave.animate.ng-leave-active,.animate.ng-输入{....animate.ng-enter.ng-enter-active,.animate.ng-离开{...Angular 会简单地将 ng-enter、ng-hide、ng-leave 等类添加到元素中，并在动画生命周期中适当地删除它们，这将触发 css 动画.在 docs 下的用法"下有一个哪些指令支持哪些动画类的列表.在这个例子中，我们对 ng-repeat 进行了动画处理，因此 ng-enter、ng-leave 和 ng-move 类将在适当的时候添加到我们的元素中，我们可以使用 css 为它们附加动画.
Base
angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS
Upped
angular 1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - FAIL
I think I did follow the instructions from the docs - http://docs.angularjs.org/api/ngAnimate
• First include angular-animate.js in your HTML
• Then load the module in your application by adding it as a dependent module
It's quite late in my timezone and I probably miss something obvious. My guess would be - CSS file between 1.1.5 and 1.2.6 is not compatible? Cannot really tell...
Anyway here is the code form upped plunker, I included some comments to emphasise that I followed instructions from docs:
<!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>
Many thanks for help!
解决方案
Here is a working version of your plunker... http://plnkr.co/edit/05irGvYwD4y9ZRb1ZHSw?p=preview
In Angular 1.2+, you don't need to declare the ng-animate directive anymore. Animations can be added with css alone. So for your example, you can remove the ng-animate directive and give the element a css class, so change...
<li ng-animate="'animate'" ng-repeat="name in names | filter:search">
to...
<li class="animate" ng-repeat="name in names | filter:search">
and then update your css to ...
.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 will simply add the ng-enter, ng-hide, ng-leave.. etc. classes to the element and remove them appropriately during the animation lifecycle, which will trigger the css animations. There is a list of which directives support which animation classes in the docs under 'Usage'. In this example, we are animating ng-repeat, so the ng-enter, ng-leave and ng-move classes will be added to our element at the appropriate time and we can attach animations to them with css.
这篇关于如何在 angular 1.2 中使用 ng-animate?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
