用angular来形成动画效果的代码如下

<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box {

            width: 100px;

            height: 100px;

            background: red;

        }

    </style>

    <script src="angular.min.js"></script>

    <script src="angular-animate.js"></script>

    <script src="jquery-1.11.3.min.js"></script>

    <script>

        //把angular中模块名和要引入的依赖模块写入

        var app = angular.module('app',['ngAnimate']);

        //angular中的控制台。先让div显示以便更好观察效果

        app.controller('ctrl',function($scope){

           $scope.btn = true;

        });

        //要形成动画效果的元素

        app.animation('.box',function(){

            //返回效果元素

            return {

                enter:function(element,done){

                    //出现时的初始值

                    $(element).css({'width': 0, 'height': 0});

                    //结束时的最终样式

                    $(element).stop().animate({'width': 100, 'height': 100}, 1000);

                },

                leave:function(element,done){

                    //消失时最终的效果

                    $(element).stop().animate({'width': 0, 'height': 0}, 1000, done);

                }

            }

        });

    </script>

</head>

<body ng-controller="ctrl">

<input type="checkbox"  ng-model="btn">

<div class="box" ng-if="btn"></div>

</body>

</html>

这样我们就可以通过angular来形成动画效果了，并且ngAnimate模型还可以添加或移除class

ngAnimate 模型其实并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (如果元素将被隐藏)
  • ng-hide-remove (如果元素将显示)
  • ng-hide-add-active (如果元素将隐藏)
  • ng-hide-remove-active (如果元素将显示)
下面我们看一个实例：
<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box {

            width: 100px;

            height: 100px;

            background: red;

            transition: all 1s ease;

        }

        .box.ng-leave {

            opacity: 1;

        }

        .box.ng-leave-active {

            opacity: 0;

        }

        .box.ng-enter {

            opacity: 0;

        }

        .box.ng-enter-active{

            opacity: 1;

        }

    </style>

    <script src="angular.min.js"></script>

    <script src="angular-animate.js"></script>

    <script>

        var app = angular.module('app',['ngAnimate']);

        app.controller('ctrl',function($scope){

           $scope.btn = true;

        });

    </script>

</head>

<body ng-controller="ctrl">

<input type="checkbox"  ng-model="btn">

<div class="box" ng-if="btn"></div>

</body>

</html>
这个实例主要标明：当你复选框选中时，让div背景透明度等于0慢慢变成1显示；
　　　　　　　 　当你没选中复选框时，让div背景透明度等于1慢慢变成0隐藏；
但是这两个在我们快速点击的时候会形成一个bug，那就是因为上一个没有执行完而形成好几个正在过度的过程。
如果要解决这个bug的方法其实也挺简单，那就是在执行前先暂停一下。下面是代码；
 $(element).stop().animate({'width': 0, 'height': 0}, 1000, done);
不足之处望大家原谅
 

angular中的动画效果的更多相关文章

  1. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  2. Android中的动画效果

    动画的种类 透明动画alphaAnimation 在代码中配置动画: findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickL ...

  3. css3实现的3中loading动画效果

    一.css3中animation动画各种属性详解: animation Value:     [<animation-name> || <animation-duration> ...

  4. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  5. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. Android---63---Android中的动画效果

    Android中有四种动画效果: AlphaAnimation:透明度动画效果 ScaleAnimation:缩放动画效果 TranslateAnimation:位移动画效果 RotateAnimat ...

  7. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  8. Vue中的动画效果

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

  9. demo_03HTML5中的动画效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. unity, 内置shader下载地址

    在unity的download页面上能找到Built in shaders的下载连接.

  2. 产生sql语句的vba

    //清除空列 Sub ClearNullMacro1() Dim j As Integer Dim colCount As Integer colCount = Cells(2, Columns.Co ...

  3. 使用802.1X+FreeRadius+LDAP实现网络准入方案

    前言:在很多运维项目交流中,我们发现有一些运维团队还是在尝试使用网管或桌面管理来进行网络准入管理,但这两个技术有一定的缺点,所以本文分享一下802.1X+开源软件整合的网络准入管理的实践. 网络准入业 ...

  4. 2、Reactive Extensions for .NET（译）

    实验3-引入 .net 中的 events 到 Rx 目标:前面实验中的使用各种工厂构造方法创建一个 可观察序列是一个部分.把 .net 中现有的异步数据源进行关联 是更重要的事情.在这次实验中我们将 ...

  5. 在windows中使用Navicat连接Linux虚拟机中的mysql数据库

    今天想用navicat远程连接虚拟机中的MySQL数据库,一直连不上,在网上搜索了一下,发现原因是MySQL对远程用户登陆的授权问题.这里说一下我的解决方法.(本人小白) 首先,我用navicat去远 ...

  6. hdu1978（记忆化搜索）

    #include<iostream> #include<stdio.h> #include<string.h> #include<queue> usin ...

  7. Hive Compiler过程

    通过Parser将HiveQL转换成AST,通过Semantic Analyzer将AST转换为QB,通过Logical Plan Generator将QB转换成Operator Tree,通过Log ...

  8. Java compiler level does not match the version of the installed Java project facet 的解决方案

     今天将MyEclipse升级到 9.1 后,打开原来的工作空间,原来所有的项目都前面都显示了一个小叉叉,代码中却没有任何错误.于从 problems 视图中查看错误信息,错误信息的"D ...

  9. NAT--Network Address Translator

    定义 Nat用于在本地网络中使用私有地址,在连接互联网时转而使用全局IP地址的技术.除了转换IP地址外,还出现了可以转换TCP.UDP端口号的NAPT(Network Address Ports Tr ...

  10. JS调用asp.net后台方法：PageMethods

    先帮朋友宣传一下程序人生(http://www.manong123.com)的网站,里面都是开发感悟,开发人员创业,支持一下吧~ 原来是通过PageMethods来实现的. 举个列子: Default ...