用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. MySql（三）：MyISAM和InnoDB区别详解

    MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...

  2. sass 的使用

    普通变量 ? 1 $fontSize:12px; 默认变量 ? 1 $fontSize:12px; !default; 变量覆盖:只需要在默认变量之前重新声明下变量即可 ? 1 2 $fontSize ...

  3. IIS短文件名泄露漏洞危害及防范方法(转)

    攻击方法(转自http://blog.sina.com.cn/s/blog_64a3795a01017xqt.html) 一直在寻找一种方法,如果我可以使用通配符"*" 和 &qu ...

  4. 混合模式程序集是针对“v2.0.50727”版的运行时生成的

    混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集. 由于“system.data.sqlite.dll”不完整造成的. 在 ...

  5. Am335x 应用层之SPI操作

    SPI接口有四种不同的数据传输时序,取决于CPOL和CPHL这两位的组合.图1中表现了这四种时序, 时序与CPOL.CPHL的关系也可以从图中看出. 图1 CPOL是用来决定SCK时钟信号空闲时的电平 ...

  6. MS SQL Server2012中的EOMONTH函数

    MS SQL Server2012中的EOMONTH函数   这个函数是获取一个指定日期所在月份最后一天的日期.可以得到某一个月月份的最后一天 如: declare @orderdate date=' ...

  7. java----内部类与匿名内部类的各种注意事项与知识点

    Java 内部类分四种:成员内部类.局部内部类.静态内部类和匿名内部类.1.成员内部类: 即作为外部类的一个成员存在,与外部类的属性.方法并列.注意:成员内部类中不能定义静态变量,但可以访问外部类的所 ...

  8. 【UVa】Palindromic Subsequence（dp+字典序）

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=465&page=s ...

  9. 借用smtp.qq.com发邮件

    至于sentmail和postfix的配置有多么麻烦学生在这里就不多废话了...反正是配置了N个小时,最终弄的头晕眼花也没弄好... 下面的方法可以让你完全摆脱这两个工具...当然,你要是想做邮件服务 ...

  10. 解决 Failure to transfer * from http://repo1.maven.org/maven2

    解决 Failure to transfer * from http://repo1.maven.org/maven2 Failure to transfer org.apache.maven:mav ...