码迷,mamicode.com
首页 > Web开发 > 详细

angularjs1--动画

时间:2017-07-26 20:14:54      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:cdn   ddc   r.js   otc   rem   function   tle   console   put   

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .box{ width:200px; height:200px; background:red; }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script src="angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script>
    <script>
        var m1 = angular.module(myApp,[ngAnimate]);
        m1.controller(firstController,[$scope,function($scope){
            $scope.bBtn = true;
        }]);
        m1.animation(.box,function(){
            return{
                enter:function(element,done){
                    console.log(element);
                    console.log(done);
                    $(element).css({width:0,height:0});
                    ///   $(element).animate({width:0,height:0});
                    $(element).animate({width:200,height:200},1000,done);
                },
                leave:function(element,done){
                    $(element).animate({width:0,height:0},1000,done);
                }
            }
        });
    </script>
</head>
<body>
<div ng-controller="firstController">
    <input type="checkbox" ng-model="bBtn">
    <div ng-if="bBtn" class="box"></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        .box{ width:200px; height:200px; background:red; }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script src="angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script>
    <script>
        var m1 = angular.module(myApp,[ngAnimate]);
        m1.controller(firstController,[$scope,function($scope){
            $scope.bBtn = true;
        }]);
        m1.animation(.box,function(){
            return{
                addClass:function(element,Sclass,done){
//                    console.log(element);
//                    console.log(Sclass);
//                    console.log(done);
                    $(element).animate({width:0,height:0},1000,done);
                },
                removeClass:function(element,Sclass,done){
                    $(element).css({width:0,height:0});
                    $(element).animate({width:200,height:200},1000,done);
                }
            }
        });
    </script>
</head>
<body>
<div ng-controller="firstController">
    <input type="checkbox" ng-model="bBtn">
    <div ng-show="bBtn" class="box"></div>
</div>
</body>
</html>

 

angularjs1--动画

标签:cdn   ddc   r.js   otc   rem   function   tle   console   put   

原文地址:http://www.cnblogs.com/yaowen/p/7241515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!