目录

ng动画实际帮我们在状态切换的时候 添加特定的样式 从而实现动画效果.

一般我们会通过C3来实现具体的动画.

CSS定义

ng-if

图(实际上,图并不能展现出什么):

HTML

<body ng-app="myApp">

    <button ng-click="show=!show">Toggle</button>

    <div ng-if="show" class="fade">Look Me</div>

    <script type="text/javascript">

        angular.module('myApp', ['ngAnimate'])

    </script>

</body>

CSS

        .fade {

            transition: 1s linear all;

        }

            .fade.ng-enter {

                opacity: 0;

            }

                .fade.ng-enter.ng-enter-active {

                    opacity: 1;

                }

            .fade.ng-leave {

                opacity: 1;

            }

                .fade.ng-leave.ng-leave-active {

                    opacity: 0;

                }

enter和leave的执行过程:

在元素创建的时候，会依次加上.ng-enter、.ng-enter-active的class，然后恢复为默认的class

同样在销毁的时候，会依次加上.ng-leave、.ng-leave-active的class，然后恢复为默认。

ngClass

这里只截取关键代码

    <button ng-click="onOff=!onOff">Toggle</button>

    <div ng-class="{on:onOff}" class="highlight">

        Highlight this box

    </div>

CSS

     .highlight {

            transition: 1s linear all;

        }

            .highlight.on-add {

                background: red;

            }

            .highlight.on {

                background: yellow;

            }

            .highlight.on-remove {

                background: blue;

            }

效果图:

1.5.8支持的指令与动画样式:

Directive Supported Animations
{@link ng.directive:ngRepeat#animations ngRepeat} enter, leave and move
{@link ngRoute.directive:ngView#animations ngView} enter and leave
{@link ng.directive:ngInclude#animations ngInclude} enter and leave
{@link ng.directive:ngSwitch#animations ngSwitch} enter and leave
{@link ng.directive:ngIf#animations ngIf} enter and leave
{@link ng.directive:ngClass#animations ngClass} add and remove (the CSS class(es) present)
{@link ng.directive:ngShow#animations ngShow} & {@link ng.directive:ngHide#animations ngHide} add and remove (the ng-hide class value)
{@link ng.directive:form#animation-hooks form} & {@link ng.directive:ngModel#animation-hooks ngModel} add and remove (dirty, pristine, valid, invalid & all other validations)
{@link module:ngMessages#animations ngMessages} add and remove (ng-active & ng-inactive)
{@link module:ngMessages#animations ngMessage} enter and leave

JS定义

HTML

<body ng-app="myApp" ng-init="items=[1,2,3,4,5,6]">

    <button ng-click="show=!show">Toggle</button>

    <div ng-if="show" ng-repeat="item in items" class="slide">

        {{ item }}

    </div>

</body>

js操作

        angular.module('myApp', ['ngAnimate'])

            .animation('.slide', [

                function () {

                    return {

                        enter: function (element, doneFn) {

                            jQuery(element).fadeIn(1000, doneFn);

                        },

                        move: function (element, doneFn) {

                            jQuery(element).fadeIn(1000, doneFn);

                        },

                        leave: function (element, doneFn) {

                            jQuery(element).fadeOut(1000, doneFn);

                        }

                    }

                }

            ]);

其中的enter move leave 对应状态变化的事件,详情建议参考源码中的$$AnimateJsProvider.

本文地址:http://www.cnblogs.com/neverc/p/5924789.html

[AngularJS] AngularJS系列(5) 中级篇之动画的更多相关文章

  1. Kotlin——从无到有系列之中级篇（四）：面向对象的特征与类（class）继承详解

    如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索 QQ群号:497071402 进入正题 在前面的章节中,详 ...

  2. [AngularJS] AngularJS系列(4) 中级篇之指令

    目录 API概览 使用Angular.UI.Bootstrap 自定义指令 scope link 我的指令 angular中的指令可谓是最复杂的一块 但是我们的上传组件就能这么写 效果图: API概览 ...

  3. [AngularJS] AngularJS系列(3) 中级篇之表单验证

    目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{f ...

  4. [AngularJS] AngularJS系列(6) 中级篇之ngResource

    目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: me ...

  5. [AngularJS] AngularJS系列(2) 中级篇之路由

    目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on(' ...

  6. 阿里巴巴笔试整理系列 Session2 中级篇

    1知识点储备-----2笔试题总结-----3面试经验总结 知识点储备 2014年8月29日在线笔试题:20单选(40分钟内完成)+附加题(2道编程+1道问答) 1. 通过算法生成的随机数是“伪随机” ...

  7. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  8. angularjs自动化测试系列之jasmine

    angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...

  9. angularjs自动化测试系列之karma

    angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...

随机推荐

  1. CAD调试时抛出“正试图在 os 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码”异常的解决方法

    这些天重装了电脑Win10系统,安装了CAD2012和VS2012,准备进行软件开发.在调试程序的时候,CAD没有进入界面就抛出 “正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain ...

  2. 解读ASP.NET 5 & MVC6系列（1）：ASP.NET 5简介

    ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一 ...

  3. MySQL Dll语句

    标签:MYSQL数据库/DBA/删除数据库表 概述 因为遇到一些事情,从发表上一篇文章到现在中间间隔了好几个月时间:在接下来的时间里会陆续发表关于mysql的一些文章,从基础到优化最后到管理,欢迎关注 ...

  4. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  5. ASP.NET MVC 5 - 将数据从控制器传递给视图

    在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图.控制器类将响应请求来的URL.控制器类是给您写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果 ...

  6. [ASP.NET MVC 小牛之路]13 - Helper Method

    我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 System.Web.Mvc 命名空间下的 HtmlHelper,习惯上我们把 ...

  7. 先有 Mac 还是先有银元？

    自从开设了这个公众号以后,收到最多的问题是:听了 Mac 君的介绍,我也觉得 Mac 很好,可是穷屌丝一枚,真买不起,怎么破?前几天我在微博上说,读了我的书,就有 Mac 了.居然有读者来问:这是真的 ...

  8. Atitit 动态调用webservice与客户端代理方式调用

    Atitit 动态调用webservice与客户端代理方式调用 方式1: 使用call.invoke  直接调用WSDL,缺点:麻烦,不推荐--特别是JAVA调用.NET的WS时,会有不少的问题需要解 ...

  9. Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构

    Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构 1. 索引的分类1 1.1. 按照存储结构划分btree,hash,bitmap,fulltext1 1.2. 索引的类型  按查找 ...

  10. WaitType：ASYNC_NETWORK_IO

    官方文档的定义,是指SQL Server 产生的结果集需要经过Network传递到Client,Network不能很快将结果集传输到Client,导致结果集仍然驻留在SQL Server的Sessio ...