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 ...
随机推荐
- Fiddler4抓包工具使用教程一
本文参考自http://blog.csdn.net/ohmygirl/article/details/17846199,纯属读书笔记,加深记忆 1.抓包工具有很多,为什么要使用Fiddler呢?原因如 ...
- Android之Zxing二维码扫描图片拉伸
还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多 ...
- FoxitReader软件下载并安装（图文详解）
不多说,直接上干货! FoxitReader官方网址:https://www.foxitsoftware.com/downloads/ 结束 欢迎大家,加入我的微信公众号:大数据躺过的坑 ...
- C/C++练习题（三）
1.对下面两个文件编译后,运行会输出什么? // 第一个文件a.c #include <stdio.h> extern char p[]; extern void f(); int mai ...
- 面向UI编程框架：ui.js框架思路详细设计
由于上一次的灵光一闪,萌生了对面向UI编程的思想实现.经过一段时间的考虑和设计,现在将思想和具体细节记录下来: 具体思路描述: 在UI.config文件中,配置所有参数,比如页面模板.所有组件.组件控 ...
- lucene源码分析(3)facet实例
简单的facet实例 public class SimpleFacetsExample { private final Directory indexDir = new RAMDirectory(); ...
- 关于拓展jQuery功能插件的写法
有两种方法: 1.jQuery.fn.extend() 用于将一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法 例子: <span id="test"& ...
- 测试使用highlight.js的代码效果
---恢复内容开始--- C#代码 private void NextDateUpdate(DateTime dtt) { dtt.AddDays(); Response.Write("dt ...
- Springboot拦截器未起作用
之前遇到要使用springboot拦截器却始终未生效的状况,查了网上的博客,大抵都是@Component,@Configuration注解未加,或是使用@ComponentScan增加包扫描,但是尝试 ...
- proto3 笔记1
定义 Message 类型, 例子如下: syntax = "proto3"; message SearchRequest { string query = 1; int32 pa ...