angular-动画。
ngAnimate插件是做什么的？
ngAnimate插件如其名字一样是为元素提供动画的。
怎么定义动画？
第一步必须是引入插件
<script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js"></script>
第二步让app引入（依赖）这个插件
var appH5=angular.module("app",['ngAnimate']);
appH5.controller("myTabCtrl",['$scope',function($scope){
$scope.isShow=true;
}])
<body ng-controller="myTabCtrl">
<input type="checkbox" ng-model="isShow" />
<div class="new-item" ng-if="isShow">我是要动画的元素</div>
</body>
添加动画的第一种方式：通过css3.0的方式
样式定义示例
.new-item{
padding: 10px;
border-bottom: 1px solid #ededed;
font-size: 1.5rem;
position: relative;
transition:all 0.5s;
}
/*元素进入页面初始状态*/
.new-item.ng-enter{
top: 10px;
}
/*进入页面动画后的最终状态*/
.new-item.ng-enter-active{
top: 0px;
}
/*元素移出页面初始状态*/
.new-item.ng-leave{
opacity:1;
}
/*移出页面动画后的最终状态*/
.new-item.ng-leave-active{
opacity:0;
}
//html
<div class="new-item">我是要动画的元素</div>
- 为什么添加样式就可以产生动画？
当元素进入页面时，angular会给元素依次添加上class ng-enter 和 ng-enter-active，相信大家都知道，CSS3.0在一个元素定义了 transition 之后，两个相同属性的属性值改变就会用过渡动画来实现属性值的改变。当元素移除页面时也是同理，所以我们只要定义元素的四个class来定义这四个时间点的状态，其他的就交给angular来做就好了。 - 支持这种方式定义动画的指令有哪些？
ng-if、ng-view、ng-repeat、ng-include、ng-switch
这几个指令是通过新建节点和移除节点来实现元素的显示和隐藏的 - ng-repeat 的不同之处
.new-item{
padding: 10px;
border-bottom: 1px solid #ededed;
font-size: 1.5rem;
position: relative;
transition:all 0.5s;
}
.new-item.ng-enter{
top: 10px;
}
.new-item.ng-enter-active{
top: 0px;
}
.new-item.ng-enter-stagger{/*ng-repeat提供了这个样式，来实现每一个item条目的依次执行某个动画 */
animation-delay:100ms;
-webkit-animation-delay:100ms;
}
.new-item.ng-leave{
opacity:1;
}
.new-item.ng-leave-active{
opacity:1;
}
.new-item.ng-leave-stagger{
animation-delay:100ms;
-webkit-animation-delay:100ms;
}
//html
<div class="new-item" ng-repeat="new in news">{{new.title}}</div>
刚才说通过新建和删除元素来实现的指令是可以进行动画的，那么只是更改样式显示或者隐藏元素的指令（ng-show ng-hide ng-class ）能不能进行动画呢？
/*元素隐藏初始状态*/
.new-item.ng-hide-add{
opacity:1;
}
/*隐藏操作动画后的最终状态*/
.new-item.ng-hide-add-active{
opacity:0;
}
/*元素显示初始状态*/
.new-item.ng-hide-remove{
top: 10px;
}
/*显示操作动画后的最终状态*/
.new-item.ng-hide-remove-active{
top: 0px;
}
添加动画的第二种方式：通过js的方式
//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令
appH5.animation(".new-item",function(){
return {
leave:function(element,done){
//第一个参数是运动的元素，第二个参数是动画完成后的回调，必须调用的，不调用则指令功能不会执行
$(element).animate({width:0,height:0},1000,done);//借助jQuery
},
enter:function(element,done){
$(element).css({width:100,height:100});//借助jQuery
$(element).animate({width:100,height:100},1000,done)//借助jQuery
}
}
}); //ng-show ng-hide ng-class 指令
appH5.animation(".new-item",function(){
return {
addClass:function(element,sClass,done){
//第一个参数是运动的元素
//第二个参数是元素的样式-->一般用不上
//第三个参数是动画完成后的回调，必须调用的，不调用则指令功能不会执行
$(element).animate({width:0,height:0},1000,done)
},
removeClass:function(element,sClass,done){
$(element).css({width:100,height:100});
$(element).animate({width:100,height:100},1000,done)
}
}
});
angular-动画。的更多相关文章
- Angular动画
Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...
- angular动画知识点以及代码样例
原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...
- Angular动画（ng-repeat）
ng-repeat 动画 根据列表元素的插入与移除,触发相应的代码添加动画 <!doctype html> <html lang="en" ng-app=&quo ...
- Angular 动画
1.先做一个简单的例子 => 定义一个div 从open渐变成closed ts:定义一个触发器 openClose,有两个状态 open 和 closed,均有对应的样式,再定义装换函数 ...
- Angular动画——路由动画及高阶动画函数
一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...
- Angular动画（ng-class）
ng-class 同 触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...
- Angular 小试牛刀[1]:Getting Started
首先,Angular2 与 Angular1.x 版本没有多大关系,甚至可以说是两个完全不一样的框架,故 Angular 指的是 Angular2 及以上的版本.而 Angular 与 TypeScr ...
- 动态创建angular组件实现popup弹窗
承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板 ...
- 从源码看 angular/material2 中 dialog模块 的实现
本文将探讨material2中popup弹窗即其Dialog模块的实现. 使用方法 引入弹窗模块 自己准备作为模板的弹窗内容组件 在需要使用的组件内注入 MatDialog 服务 调用 open 方法 ...
- angular学习第1步
#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
随机推荐
- Spring Security构建Rest服务-1200-SpringSecurity OAuth开发APP认证框架
基于服务器Session的认证方式: 前边说的用户名密码登录.短信登录.第三方登录,都是普通的登录,是基于服务器Session保存用户信息的登录方式.登录信息都是存在服务器的session(服务器的一 ...
- rabbitmq实现一台服务器同时给所有的consumer发送消息（tp框架）（第四篇）
之前的学习了把消息直接publish到queue里面,然后consume掉, 真实的情况,我们会把消息先发送到exchange里面,由它来处理,是发给某一个队列,还是发给某些队列,还是丢弃掉? exc ...
- 【数组】kSum问题
一.2Sum 思路1: 首先对数组排序.不过由于最后返回两个数字的索引,所以需要事先对数据进行备份.然后采用2个指针l和r,分别从左端和右端向中间运动:当l和r位置的两个数字之和小于目标数字targe ...
- Okhttp3上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
- Java_反射机制详解
本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象 ...
- css 设置滚动条的样式
/*移动端显示滚动条*/ .layui-table-body::-webkit-scrollbar { -webkit-appearance: none; } .layui-table-body::- ...
- Java保存文本文件
String requestData = "something you want to save"; String saveFilePath = "C:\\Users\\ ...
- C++调用C代码的两种方式
由于C++支持函数重载,在编译函数代码的时候会加上参数类型的信息,而C编译只有函数名信息,导致C++直接调用C代码在链接的时候会出现函数未定义的问题.解决这种问题有两种方法.方法一:在写C代码的时候考 ...
- spark报错处理
Spark报错处理 1.问题:org.apache.spark.SparkException: Exception thrown in awaitResult 分析:出现这个情况的原因是spark启动 ...
- iOS 微信支付SDK与微信友盟分享两者同时集成时，出现的问题与解决之路。
这两天改版一个旧的APP,要旧貌换新颜,拿到app后进行编译,一直报下面的错误. 报不认识的符号名PayReq错误.奇怪,啥也没动就这样,真不知道给的包是不是本来就是个报错的工程. 不管怎样,要对它修 ...