<!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. 免费获取Bootstrap模板的方法

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,其中中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮.功能完备的网站. 最近通过了Bootstrap中文网学习了其 ...

  2. C#使用SqlTransaction事务回滚与SqlBulkCopy批量插入数据

    C#中批量处理数据,有时候因为一条记录导致整个批量处理失败.这时候肯能会导致数据不全等问题,这时候我们可以使用SqlTransaction来进行事务回滚,即是要么全部成功要么全部不成功.如下代码 // ...

  3. javascript中in运算符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. MemCached总结一：Unbutu操作系统下memcached服务器安装和telnet方式连接memcache

    1.在Unbutu上安装memcached服务器 sudo apt-get update sudo apt-get install memcached 2. 确认memcached是否安装 要确认me ...

  5. profibus

    在研究profibus之前先提出问题,带着问题查看 profibus跟硬件无关?只是软件上的协议复杂? profibus和modbus的区别? 解读: profibus跟硬件关系不大,profibus ...

  6. （转）Bootstrap3 概述

    http://blog.csdn.net/duruiqi_fx/article/details/53285607 注意:HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS ...

  7. <转>统计源代码行数的一些实现方法

    这个问题的思考其实对于某一种语言而言,基本都能实现,只是简单和复杂而已.而此次我讨论就是只是在linux下面使用了shell和c对源代码进行行 数的讨论.本打算是实现一个python版本的,由于pyt ...

  8. Java导出Excel文件的两种方法

    将数据以Excel表格的形式导出:首先下载poi的jar包,导入项目中,或者使用maven仓库管理,在pom文件添加:<dependency>    <groupId>org. ...

  9. Quoit Design (HDU 1007)平面的最近点对

    题目大意:给定平面上的 n 个点,求距离最近的两个点的距离的一半. n <= 10^5.   晕乎乎的度过了一上午... 总之来学习下分治吧233 分治就是把大问题拆成小问题,然后根据对小问题处 ...

  10. Linux搭建oracle数据库

    1.安装前准备   软件硬件要求 操作系统:CentOS 6.4(32bit)Oracle数据库版本:Oracle 10g(10201_database_linux32.zip)最小内存:1G(检查命 ...