Angular动画（ng-repeat）

最新推荐文章于 2021-06-10 16:20:27 发布

weixin_30338743

最新推荐文章于 2021-06-10 16:20:27 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chefweb/p/6122058.html

版权

ng-repeat 动画

根据列表元素的插入与移除，触发相应的代码添加动画

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="angular-animate.min.js"></script>
    <style>
        li
        {
            height:45px;
        }
        .even
        {
            background:red;
        }

        .odd
        {
            background:green;
        }
    </style>
</head>
<body>

<div ng-controller="myController">

    <!--
        根据 model 输入的值过滤数组元素
        ng-repeat="v in arr|filter:name track by $index"
    -->

    <input type="text" ng-model="name"/>
    <ul>
        <li 
                ng-repeat="v in arr|filter:name track by $index "
                class="li"
                ng-class-even="'even'"
                ng-class-odd="'odd'"
                >{{v}}
        </li>
    </ul>
</div>

<script>
    angular.module("myApp",["ngAnimate"])
            .controller("myController",function($scope){
                $scope.arr = [
                        "sgssb","afewae","yjgyj","ioil","fefe","jf,jtuy,","seven","eight","nine","ten",
                    "a","b","c","c","d","f","s","a","5fsg","sgsfgsg"
                ];
            })

            //使用动画需要一个类名
            .animation(".li",function(){
                return{

                    //一项被插入到列表时触发
                    enter:function(element,done){

                        //定义动画
                        $(element).animate({"height":"45px","opacity":"1"},300,function(){
                            done();
                        })
                    },

                    //一项从列表中被移除时触发
                    leave:function(element,done){

                        //定义动画
                        $(element).animate({"height":"0","opacity":"0"},300,function(){
                            done();
                        })
                    }

                }
            })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/chefweb/p/6122058.html

weixin_30338743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular动画（ng-repeat）

ng-repeat 动画根据列表元素的插入与移除，触发相应的代码添加动画<!doctype html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>Document</title> &lt...
复制链接

扫一扫