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服务-1205-Spring Security OAuth开发APP认证框架之Token处理
token处理之二使用JWT替换默认的token JWT(Json Web Token) 特点: 1,自包含:jwt token包含有意义的信息 spring security oauth默认生成的t ...
- Go语言学习笔记五： 条件语句
Go语言学习笔记五: 条件语句 if语句 if 布尔表达式 { /* 在布尔表达式为 true 时执行 */ } 竟然没有括号,和python很像.但是有大括号,与python又不一样. 例子: pa ...
- Go url编码和字符转码
类似php中的urlencode 和htmlspecialchars: package main import ( "fmt" "html" "net ...
- 破局人工智能：构建AI，与腾讯云一起探索语音应用场景
本文来自腾讯云技术沙龙,本次沙龙主题为AI平台及智能语音应用解析 近年来,人工智能技术快速发展,与其他行业的结合也成为业界不断探索的方向.在人工智能基础和工具方面,AI平台已成为降低人工智能门槛的关键 ...
- c#中引用类型作为值参数和引用参数问题
一.分类 C#的值类型包括:结构体(数值类型,bool型,用户定义的结构体),枚举,可空类型. C#的引用类型包括:数组,用户定义的类.接口.委托,object,字符串. 二.参数传递 对于引用类型, ...
- C#语法之匿名函数和Lambda表达式
上一篇博客主要是对委托和事件做了一小结,这篇是在上一篇博客的基础上对匿名函数和Lambda表达式小结.还是接着上一篇说起,在上一篇中也说了委托是一种数据结构,主要是解决让函数作为参数的问题.在使用委托 ...
- bind9配置转发服务
修改bind主配置文件 $ vi /etc/named.conf//// named.conf//// Provided by Red Hat bind package to configure th ...
- jQuery二维码
现在二维码很火,因为他可以很方便的贴到任何地方,只要扫一扫就可以看到二维码的内容 ok 废话少说,上代码 这个二维码基于jquery和jquery.qrcode插件 所以使用前先引入 <scri ...
- Asp.Net 天气 WebService 使用
本文使用Asp.Net (C#)调用互联网上公开的WebServices(http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实 ...
- [日常] Redis基本使用测试
Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表(list ...