<!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. 在树莓派下对多个串口转USB设备进行设备名称绑定操作

    在开发过程中,需要用一个树莓派链接多个串口转USB设备(GPS模块,数传模块等),在树莓派linux系统环境下,USB串口设备的命名规则是 /dev/ttyUSB0 ,/dev/ttyUSB1,/de ...

  2. Java设计模式-策略模式详解

    前言 在软件领域中,设计模式作为一种经典的开发实践常常需要我们去深入的理解,而策略模式作为设计模式的一种,使用频率也是相对来说比较高的,在Java中,当我们学习TreeSet集合的时候,就采用了经典的 ...

  3. BZOJ 3910 并查集+线段树合并

    思路: 1. 并查集+线段树合并 记得f[LCA]==LCA的时候 f[LCA]=fa[LCA] 2.LCT(并不会写啊...) //By SiriusRen #include <cstdio& ...

  4. O - Masha and Bears

    Problem description A family consisting of father bear, mother bear and son bear owns three cars. Fa ...

  5. Selenium之当鼠标悬浮时隐藏的元素才出现

    在自动化过程中,有些导航按钮只有当鼠标悬浮在登录信息上时,它才能出现.这时候如果想要点击导航按钮直接用selenium的webDriver是无法定位的元素的,因为这些元素是隐藏的,只有鼠标悬浮时才出现 ...

  6. winFrom线程

    方法--->委托--->BeginInvoke用指定的参数异步执行委托 委托就是我想做什么,而你可以作什么,我就让你去做.

  7. 励志：98岁老爷爷用Windows系统自带画图软件制作的神作

    哈尔拉斯科,是一位很出名的老爷爷,他70岁才接触MS Paint(就是我们熟知的Windows自带的画图软件).他曾经是一名图形艺术家,但是之前他都是手工创作.他熟知怎么用双手进行艺术创作.但是后来, ...

  8. Windows2012R2 时间同步设置

    Windows2012R2里没有了internet时间,或者Internet时间无法同步成功,都可以尝试使用如下方法. 1.打开命令提示符, 输入:gpedit.msc,打开组策略管理器 2.执行上述 ...

  9. In-Out Parameters inout keyword

    You write an in-out parameter by placing the inout keyword right before a parameter’s type. An in-ou ...

  10. <转>Socket编程——基础介绍

    最近系统的看了下unix网络编程的一些内容,对socket的理解有了进一步的加深,在看APUE的时候,那会儿看socket上面介绍的比较少,只是模糊的懂了如何去写一个简单的TCP服务端和客户端,对其中 ...