<!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--动画的更多相关文章

  1. 初试angularjs动画(animate)

    angularjs不同版本的代码写法各有千秋,动画模块的写法也各有不同,以下是收集到的两大版本的写法,各位请: angularjs1.1.5版本(1.2之前) index.html代码: <!D ...

  2. 动画requestAnimationFrame

    前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...

  3. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  4. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  5. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  6. 虾扯蛋：Android View动画 Animation不完全解析

    本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...

  7. Visaul Studio 常用快捷键的动画演示

    从本篇文章开始,我将会陆续介绍提高 VS 开发效率的文章,欢迎大家补充~ 在进行代码开发的时候,我们往往会频繁的使用键盘.鼠标进行协作,但是切换使用两种工具会影响到我们的开发速度,如果所有的操作都可以 ...

  8. transtion:过渡动画

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...

  9. 再谈CAAnimation动画

    CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...

  10. jQuery动画-圣诞节礼物

    ▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...

随机推荐

  1. node.js date-utils

    前端引用 <script type="text/javascript" src="date-utils.min.js"></script> ...

  2. Tomcat修改默认根目录

    tomcat7默认的程序发布路径为tomcat/webapps/ROOT/下面 修改Tomcat配置文件server.xml <Host name="localhost" a ...

  3. 百度地图api的简单应用

    百度地图api 获取经纬度(通过浏览器的) //获取经纬度 window.navigator.geolocation.getCurrentPosition(function(position) { a ...

  4. rem简单实现移动端适配

    rem:移动web开发 默认字体大小是16px 在<html>中设置字体大小 与em的区别: em是在父级设置字体大小受影响 移动端适配 首先获取屏幕的宽度 计算当前屏幕宽度和640的比例 ...

  5. hiho1804 - 整数分解、组合数、乘法逆元

    题目链接 题目叙述很啰嗦,可以简化为:n个球[1-1e5],放到m个不同的桶里,一共多少种不同的放法.[桶里可以不放] ---------------------------------------- ...

  6. Xcode8 NSLog打印json不完整的解决方案

    解决方案:自定义宏,通过fprintf函数打印log,完美解决! #ifdef DEBUG #define NSLog(FORMAT, ...) fprintf(stderr, "%s:%z ...

  7. 图片放大不失真软件PhotoZoom如何使用？

    PhotoZoom可以将我们一些过于像素低的照片可以无失真放大,那么PhotoZoom是如何实现无失真照片放大的呢? 以上图像中的编号表示每个步骤应操作的位置. 单击“打开”,并选择您想调整大小的图像 ...

  8. 换个语言学一下 Golang （2）——基础语法

    Go 标记 Go 程序可以由多个标记组成,可以是关键字,标识符,常量,字符串,符号.比如下面的hello world就是由 6 个标记组成: 行分隔符 在 Go 程序中,一行代表一个语句结束.每个语句 ...

  9. Pycharm 设置

    1:显示行号 打上对勾OK 2:设置作者 & 文件编码 3:选择切换Python的版本

  10. VS Code编写html（2）

    <html> <head> <title>welcome to myspace</title> <meta charset="utf-8 ...