用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. XCODE中配置使用boost

    1.  开发平台:os x 2.  boost安装目录: 3.  xcode中配置:    4. 测试  

  2. github提交一个空目录

    github默认不上传空目录,有的时候需要空目录来保持程序的结构. 二个小问题. 1.始终保持空目录,即时里面有文件,也全部忽略掉. 建立一个.gitignore文件放到空目录内. mkdir emp ...

  3. Selenium - Switch & Select Api

    一.多表单切换  driver.switch_to.frame() iframe  :直接将一个html 页面嵌入另一个html 页面中 switch_to.frame() 默认可以直接取表单的id ...

  4. 每日英语：Vender Assault Shines Ugly Light on China's Urban Enforcers

    The sudden death of a street vendor in Hunan province on Wednesday provoked outrage chengguan, or ur ...

  5. cocos2dx集成友盟社会化分享图片崩溃问题

    本人不懂oc,一步一步按照友盟的文档做,好不容易把分享做好了,结果在 分享图片的时候宕掉了.各种测试,搞了一下午终于搞定了. 如下是友盟文档的做法,错误就在[UIImage imageNamed:@& ...

  6. VMware12激活码，win10激活码

    VMware Workstation 12序列号: 5A02H-AU243-TZJ49-GTC7K-3C61N win10激活码:这里在网上搜集到很多激活码,可能有的不能用.   WRUF7-AFI0 ...

  7. Linux下清空缓冲区的方法

    Linux下清空缓冲区的方法 C标准规定fflush()函数是用来刷新输出(stdout)缓存的.对于输入(stdin),它是没有定义的.但是有些编译器也定义了fflush( stdin )的实现,比 ...

  8. PHP——注册页面，审核页面，登录页面：加Session和Cookie

    实现效果: 用户注册信息,管理员核对信息审核通过后,可实现注册的用户名和密码的成功登陆,利用session和cookie获取用户信息并且不能跳过登录页面直接进入主页面 1.Session存储在服务器可 ...

  9. 微信小程序 - WapRequest.js

    文件位于 utils/WapRequest.js 封装了所有接口请求和wap站点的controller请求,代码示例 /** * 选择 洲 国家 * 无参数 */ WapRequest.prototy ...

  10. 情商 EQ & 儿童情商

    EQ 包括哪些内容 1. 认知自身情绪的能力(正确客观的评价自己)2. 管理自己情绪的能力(控制冲动) 3. 自我激励能力(学会抗挫折) 4. 认识他人情绪的能力(学会移情) 5. 人际关系处理能力 ...