分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了结构-行为-样式-angularJs ngAnimate(Js实现)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

声明
页面
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',@H_404_206@function@H_419_209@($scope){
        $scope.users = ['Fabio','Leonardo','Thomas','Gabriele','Fabrizio','John','Luis','Kate','Max'];
    }]);
    app.animation('.animate-repeat',@H_404_206@function@H_419_209@(){
        return {
            enter:@H_404_206@function@H_419_209@(element,donE){
                $(element).css({opacity:0});
                 jQuery(element).animate({
                        opacity: 1,height:40
                        },300,donE);
                      return @H_404_206@function@H_419_209@(isCancelled) {
                        if(isCancelled) {
                          jQuery(element).stop();
                        }
                      }
            },leave:@H_404_206@function@H_419_209@(element,donE){
                jQuery(element).animate({
                    opacity:0,height:0
                  },donE);
                  return @H_404_206@function@H_419_209@(isCancelled) {
                    if(isCancelled) {
                      jQuery(element).stop();
                    }
                  }
            },move:@H_404_206@function@H_419_209@(element,donE){
                //do not used
            }
        };
    });

四、注意事项

1、Angular的版本与Angular-animate的版本要一致，不然会报错；
2、一个App内不能声名相同名字的Controller；
3、上面例子只是ng-repeat的版本，其实还有其他版本；
4、ng-repeat只用到了Animate声明Js版本中的enter,leave和move三个方法；