通过几中指令就能完成1.2.xx的animate

·ng-repeat

·ng-show,ng-hide

·ng-if,ng-include,ng-view

·ng-switch

·ng-class

angular会在不同的时间加上不同的css

假设我们使用了ng-if

.animate.ng-enter {
top: -200px; //进场的起点
} .animate.ng-enter.ng-enter-active {
top: 0px; //进场的终点
} .animate {
top: 0px; //原本的位置
} .animate.ng-leave {
top: 0px; //离开的起点
} .animate.ng-leave.ng-leave-active {
top: 200px; //离开的终点
}

angular会在不同时间给上不同的css,但是在ff是看不到的,我也不知道为什么。。。

以上是通过transition来完成动态,如果要更好的动画可以使用keyframes

angular : ng-animate : css 原理,详解的更多相关文章

  1. 【动画消消乐】HTML+CSS 自定义加载动画:清新折叠方块效果 063(附源码及原理详解)

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  2. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  3. NFS原理详解

    NFS原理详解 摘自:http://atong.blog.51cto.com/2393905/1343950 2013-12-23 12:17:31 标签:linux NFS nfs原理详解 nfs搭 ...

  4. I2C 基础原理详解

    今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...

  5. Zigbee组网原理详解

    Zigbee组网原理详解 来源:互联网 作者:佚名2015年08月13日 15:57   [导读] 组建一个完整的zigbee网状网络包括两个步骤:网络初始化.节点加入网络.其中节点加入网络又包括两个 ...

  6. SSL/TLS 原理详解

    本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...

  7. 锁之“轻量级锁”原理详解(Lightweight Locking)

    大家知道,Java的多线程安全是基于Lock机制实现的,而Lock的性能往往不如人意. 原因是,monitorenter与monitorexit这两个控制多线程同步的bytecode原语,是JVM依赖 ...

  8. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  9. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  10. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

随机推荐

  1. [HNOI2004]Language L语言

    2777: [HNOI2004]Language L语言 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 10  Solved: 5[Submit][S ...

  2. 配置tomcat及如何自动编译jsp文件

    1.myeclipse如何关联tomcat? 四个注意点...  必须一致! 2.别人修改过jsp不用重启服务器,我的却要每次重启服务器,网上找了很多方法都没有用,很是郁闷...最后发现了原来是bui ...

  3. 不错的Django技术网址

    Ajax与json需要看得 http://stackoverflow.com/questions/30243101/return-queryset-as-json

  4. iOS 之 微信开发流程

    第1阶段 注册开放平台帐号 注册成为微信开放平台开发者 立即注册 认证开发者资质 开发者资质认证通过后才可申请微信支付,申请审核服务费:300元/次 立即认证 创建APP并提交审核 提交你的APP基本 ...

  5. GoLang(第一篇 安装)

    golang官网:https://golang.org 中文文档:docscn.studygolang.com/doc/ 一:环境变量设置 导入环境变量GOROOT:export GOROOT=/us ...

  6. eclipse修改主题配色

    1.Java-->Editor---> Syntax Coloring修改类中的各种代码颜色 2.General-->Editors --->Text Editors

  7. php 正则只保留 汉字 字母 数字

    $str = "?><?>”\"<喂喂喂555?><|“:L}{P+_)In thsdff0?><M<>\"s ...

  8. jmeter接口测试实践

    一.什么是接口测试? 接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点.测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻 ...

  9. --@angularJS--路由、模块、依赖注入

    以下是演示angular路由切换的demo. 主页:index.html <!doctype html><html ng-app="bookStoreApp"&g ...

  10. word中利用宏替换标点标点全角与半角

    Alt+F11,然后插入-模块: 复制下面代码到编辑窗口: Sub 半角标点符号转换为全角标点符号() '中英互译文档中将中文段落中的英文标点符号替换为中文标点符号 Dim i As Paragrap ...