angularjs1--动画

简介:
复制代码
<!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>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7241515.html,如需转载请自行联系原作者

相关文章
|
6月前
|
前端开发 JavaScript API
AngularJS的动画系统:深入探索与实践
【4月更文挑战第28天】本文深入探讨AngularJS的动画系统,基于CSS3和JavaScript实现视图、元素的动画效果。通过ngAnimate模块管理动画,使用CSS类定义样式和行为,结合ng-enter等指令触发效果。支持列表和路由动画,但应注意性能优化,如减少不必要的操作、利用硬件加速及异步加载。良好的动画系统应具有一致性和可预测性,提升用户体验和交互性。
|
6月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
JSON 前端开发 JavaScript
总结—angularjs项目
总结—angularjs项目
244 0
总结—angularjs项目
|
数据安全/隐私保护
AngularJS driective 封装 自动滚动插件
1.ui-smooth-scroll.js文件内容 angular.module('app') .directive('uiSmoothScroll', ['$location', '$anchorScroll', function($location, $anchorScroll)...
1146 0
|
前端开发 JavaScript UED
AngularJS中的按需加载ocLazyLoad
初学者,有不足的地方希望各位指出   一、前言     ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好。
1618 0