<!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. xBIM 基础02 快速入门

    系列目录    [已更新最新开发文章,点击查看详细]  一.新建项目 Visual Studio 新建项目.项目创建完成后 Nuget ,项目添加 Xbim.Essentials,那么如果项目需要几何 ...

  2. Xposed那些事儿 — xposed框架的检测和反制

    之前看到有人发了关于使用xposed屏蔽抖音检测xposed的思路(https://www.52pojie.cn/thread-684757-1-1.html),贴出了部分伪代码,但觉抖音写的蛮有意思 ...

  3. Vue.js 2 vs Vue.js 3的实现 – 云栖社区

    Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...

  4. lz的第一个RN项目

    这是lz 成功在原有项目上集成的第一个ReactNative 项目. 参考官方网址: http://reactnative.cn/docs/0.43/integration-with-existing ...

  5. asp.net URL传递中文参数System.Web.HttpUtility.UrlEncode与Server.UrlEncode的区别

    asp.net URL传递中文参数System.Web.HttpUtility.UrlEncode与Server.UrlEncode的区别(一) HttpUtility.UrlEncode 方法: 对 ...

  6. Computer Vision的尴尬

    原文: Computer Vision是AI的一个非常活跃的领域,每年大会小会不断,发表的文章数以千计(单是CVPR每年就录取300多,各种二流会议每年的文章更可谓不计其数),新模型新算法新应用层出不 ...

  7. 一个单元格占两行三列的HTML代码为

    主要是这两个属性: colspan 单元格占多少列 rowspan 单元格占多少行 <table width="200" border="1">&l ...

  8. Period UVA - 1328_结论题

    Code: #include<cstdio> #include<cstring> using namespace std; const int maxn=1000000+5; ...

  9. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

  10. Python笔记8----DataFrame（二维）

    目录: DataFrame概念 DataFrame创建 基本操作 查看.索引 修改.删除 统计功能 条件筛选 合并 去除空值 4. 一些常用的函数 apply memory_usage pivot_t ...