您的位置：首页 > Web前端 > AngularJS

结构-行为-样式-angularJs ngAnimate(Js实现)

2016-04-07 23:12 555 查看

声明

页面

Js

注意事项

官方链接

一、声明

注意animate的版本要与Angular的一致。

<script src="jquery.1.9.1.min.js"></script>
<script src="angular.js"></script>
<script src="angular-animate.js"></script>

二、页面

<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<h3>Animation-js</h3>
<form class="form-search">
<div class="input-append">
<input type="text" ng-model="search"
placeholder="Search user"
class="form-control" >
</div>
<ul class="example-animate-container">
<li class="animate-repeat"
ng-repeat="user in users | filter:search">
<a href="#"> {{user}} </a>
</li>
</ul>
</form>
</div>
</body>

三、Js

var app =  angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl',['$scope',function($scope){
$scope.users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];
}]);
app.animation('.animate-repeat',function(){
return {
enter:function(element,done){
$(element).css({opacity:0});
jQuery(element).animate({
opacity: 1,
height:40
},300, done);
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},
leave:function(element,done){
jQuery(element).animate({
opacity:0,
height:0
},300, done);
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},
move:function(element,done){
//do not used
}
};
});

四、注意事项

1、Angular的版本与Angular-animate的版本要一致，不然会报错；

2、一个App内不能声名相同名字的Controller；

3、上面例子只是ng-repeat的版本，其实还有其他版本；

4、ng-repeat只用到了Animate声明Js版本中的enter,leave和move三个方法；

5、有时候只控制高度就可以达到效果；

五、官方链接

Angularjs-ngAnimate官方Api

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航