用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. Redis(十三):Redis分布式锁的正确实现方式

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  2. 大数据学习之Scala中main函数的分析以及基本规则（2）

    一.main函数的分析 首先来看我们在上一节最后看到的这个程序,我们先来简单的分析一下.有助于后面的学习 object HelloScala { def main(args: Array[String ...

  3. AppModify修改app.config

    public class AppModify { /// <summary> /// 依据连接串名字connectionName返回数据连接字符串 /// </summary> ...

  4. solr 简单搭建 数据库数据同步（待续）

    原来在别的公司负责过文档检索模块的维护(意思就是不是俺开发的啦). 所以就略微接触和研究了下文档检索. 文档检索事实上是全文检索.是通过一种技术把N多文档进行一定规律的分割归类,然后创建易于搜索的索引 ...

  5. CodeForces 459D Pashmak and Parmida's problem

    Pashmak and Parmida's problem Time Limit:3000MS     Memory Limit:262144KB     64bit IO Format:%I64d ...

  6. Shape Control for .NET

    Shape Control for .NET Yang Kok Wah, 23 Mar 2017 CPOL    4.83 (155 votes)   Rate this: vote 1vote 2v ...

  7. rp2836 网卡以及串口与接插件位置关系

    P3     ETH1 P6     ETH0 P7     /dev/ttyS3 调试口 P13-1  /dev/ttyS2  rs485+ P13-2  /dev/ttyS2  rs485- P1 ...

  8. 本机添加多个git仓库账号

    我们可能会需要在一台电脑上以不同的github账户去使用git,这时就需要去解决如何管理本机上的多个ssh key的问题了. 生成新ssh key 如果我们电脑上已经存在了一个ssh key,那么我们 ...

  9. jackson 不拼null节点的注解

    http://blog.sina.com.cn/s/blog_544a7be401011url.html ——————————————————————————————————————————————— ...

  10. VisualStudio快捷键

    ctrl+k,c 注释选中行 ctrl+k,u 取消对选中行的注释 CTRL + SHIFT + B:生成解决方案 CTRL + F7 :生成编译 CTRL + O :打开文件 CTRL + SHIF ...