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

最新推荐文章于 2024-05-10 09:33:43 发布

洲上牧童

最新推荐文章于 2024-05-10 09:33:43 发布

阅读量930

点赞数

分类专栏：前端 angularJs 文章标签： angular

本文链接：https://blog.csdn.net/kingbox000/article/details/51090385

版权

前端同时被 2 个专栏收录

19 篇文章 3 订阅

订阅专栏

angularJs

5 篇文章 0 订阅

订阅专栏

声明
页面
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

洲上牧童

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
结构-行为-样式-angularJs ngAnimate(Js实现)

声明页面 Js 注意事项官方链接一、声明注意animate的版本要与Angular的一致。<script src="angular.js"></script><script src="angular-animate.js"></script>二、页面<body ng-app="myApp" ng-controller="myCtrl" ><div class="lab
复制链接

扫一扫