<!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. SilverLight Q&A

    1.在学校prism,Unity框架的时候,遇到的问题“The IModuleCatalog is required and cannot be null in order to initialize ...

  2. mvc中Html.AntiForgeryToken的作用和用法

    参考:http://blog.csdn.net/cpytiger/article/details/8781457

  3. website robots.txt 防爬虫 措施

    robots.txt文件用法举例: 1. 允许所有的robot访问 User-agent: * Allow: / 或者 User-agent: * Disallow: 2. 禁止所有搜索引擎访问网站的 ...

  4. Devexpress PdfViewer预览pdf，禁止下载，打印，复制

    PDFviewer控件: 参数设置: 1.屏蔽书签栏和右键菜单 2.加载文档支持路径以及流stream加载的方式 pdfViewer.MenuManager.DisposeManager(); pdf ...

  5. unity3d 让物体移动到点击位置

    using UnityEngine; using System.Collections; public class test : MonoBehaviour { //在场景中鼠标点击地面后,角色可以移 ...

  6. let,const,var三者之间的区别

    在ES6中新增了两种定义变量的命令let和const,在这之前相信大家都对var定义变量很熟悉,那么在了解ES6方法前, 1.我们先来回顾一下var定义变量的方法. 下面来看这段代码: for (va ...

  7. spring IOC(DI)和AOP

    软件152谭智馗 IOC(Inversion of Control,控制倒转)Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制. DI—Dependency Injecti ...

  8. SVN客户端安装 Linux

    1.下载 [maintain@HM16-213 software]$ wget http://subversion.tigris.org/downloads/subversion-deps-1.6.1 ...

  9. ML及AI资源索引

    原文链接:http://blog.csdn.net/pongba/article/details/2915005 机器学习与人工智能学习资源导引 TopLanguage(https://groups. ...

  10. UVa 1583 Digit Generator WA

    #include<stdio.h> int main() { long int n,i,s=0; while(scanf("%d",&n)!=EOF) { in ...