用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. Android批量图片载入经典系列——afinal框架实现图片的异步缓存载入

    一.问题描写叙述 在之前的系列文章中,我们使用了Volley和Xutil框架实现图片的缓存载入,接下来我们再介绍一下afinal 框架的使用. Afinal 是一个android的http框架.sql ...

  2. mysql 主主复制（双主复制）binlog-do-db

    [root@DB ~]# grep "binlog-do-db" /etc/my.cnf binlog-do-db = test [root@DB-S ~]# grep " ...

  3. svn move (mv,rename,ren)

    svn 重命名文件: [root@NGINX-APACHE-SVN pro]# svn move 20160624新建数据库表.txt 201.txt A 201.txt D 20160624新建数据 ...

  4. UNRECOGNIZED SELECTOR SENT TO INSTANCE 问题快速定位的方法

    开发中常见的一类崩溃错误是遇到:unrecognized selector sent to instance 0xaxxxx…而backtrace又无法明确说明错误在哪行代码,如何快速定位BUG呢? ...

  5. Ubuntu安装Nginx和正确卸载Nginx Nginx相关

    1.Ubuntu下安装Nginx比较简单 敲入下列命令即可: sudo apt-get update sudo apt-get install nginx 2.Ubuntu下卸载,稍不注意就会入坑 s ...

  6. vim 笔记

    1.替换 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky :%s/vivian/sky/(等同于 : ...

  7. 基于CSS3 3D百叶窗图像过渡特效

    你可能已经在网上看到过不少使用jQuery制作的百叶窗效果,我们可不可以使用纯CSS来完成这项工作呢?答案是肯定的.我们不仅可以制作出这种百叶窗效果,还可以使它具有响应性. 在线预览   源码下载 要 ...

  8. 转载：vim的复制，删除，粘贴，块操作以及快速替换功能

    掌握如下命令有什么好办法,我可以告诉你唯手熟尔!!多看多练对于VIM而言,复制,删除,粘贴的操作应该是非常多的.这次也做一个总结,关于处理VIM下的复制,删除,粘贴等操作.学会使用帮助文件,命令的帮助 ...

  9. Linux kernel 之 uart 驱动解析

    uart 是一种非常之常见的总线,比如DEBUG信息输出,小数据量数据传输,485,以及蓝牙的控制,GPS,很多都是通过uart 进行数据传输并进行控制. 在Linux kernel 内部,uart ...

  10. [pwm]PWM的输入捕捉模式

    对于stm32来说,输入捕捉模式有两种: 普通输入捕捉模式:经常用来测量脉冲宽度和频率,例如测量脉冲宽度,TIM5_CH1来捕获高电平脉宽,首先先设置输入捕获为上升沿触发,然后记录下发生上升沿时TIM ...