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-动画。的更多相关文章
	

    
						
  1. Angular动画
		
    Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...
    
		
    2. 
						
  2. angular动画知识点以及代码样例
		
    原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...
    
		
    3. 
						
  3. Angular动画（ng-repeat）
		
    ng-repeat 动画 根据列表元素的插入与移除,触发相应的代码添加动画 <!doctype html> <html lang="en" ng-app=&quo ...
    
		
    4. 
						
  4. Angular 动画
		
    1.先做一个简单的例子  =>  定义一个div 从open渐变成closed ts:定义一个触发器 openClose,有两个状态 open 和 closed,均有对应的样式,再定义装换函数  ...
    
		
    5. 
						
  5. Angular动画——路由动画及高阶动画函数
		
    一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...
    
		
    6. 
						
  6. Angular动画（ng-class）
		
    ng-class 同 触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...
    
		
    7. 
						
  7. Angular 小试牛刀[1]:Getting Started
		
    首先,Angular2 与 Angular1.x 版本没有多大关系,甚至可以说是两个完全不一样的框架,故 Angular 指的是 Angular2 及以上的版本.而 Angular 与 TypeScr ...
    
		
    8. 
						
  8. 动态创建angular组件实现popup弹窗
		
    承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板 ...
    
		
    9. 
						
  9. 从源码看 angular/material2 中 dialog模块 的实现
		
    本文将探讨material2中popup弹窗即其Dialog模块的实现. 使用方法 引入弹窗模块 自己准备作为模板的弹窗内容组件 在需要使用的组件内注入 MatDialog 服务 调用 open 方法 ...
    
		
    10. 
						
  10. angular学习第1步
		
    #### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. hanlp的基本使用--python(自然语言处理)
			
    hanlp拥有:中文分词.命名实体识别.摘要关键字.依存句法分析.简繁拼音转换.智能推荐. 这里主要介绍一下hanlp的中文分词.命名实体识别.依存句法分析,这里就不介绍具体的hanlp的安装了,百度 ...
    
			
    2. 
						
  2. 【C#小知识】C#中一些易混淆概念总结（三）---------结构，GC，静态成员，静态类
			
    目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) ---------------------------------------分割线----------- ...
    
			
    3. 
						
  3. 详解XMLHttpRequest的跨域资源共享
			
    0x00 背景 在Browser Security-同源策略.伪URL的域这篇文章中提到了浏览器的同源策略,其中提到了XMLHttpRequest严格遵守同源策略,非同源不可请求.但是,在实践当中,经 ...
    
			
    4. 
						
  4. Tensorflow 方法记录
			
    1.tf.convert_to_tensor:传入的list必须是一个有固定长度的list,如果为2维的list,第二维的list的长度必须是固定. 2.tf.layers.conv1d(),默认宽卷 ...
    
			
    5. 
						
  5. [PY3]——Queue
			
    Queue class Queue(builtins.object) __init__(self, maxsize=0) empty(self) full(self) get(self, block= ...
    
			
    6. 
						
  6. 初试spring boot
			
    最近发现大家都开始使用spring boot了,据说能极大简化spring相关配置,提升开发速度,于是也就决定小小研究一下,在后面的开发中使用一下看看.在这里记录一下学习过程,由于其使用已经相当成熟, ...
    
			
    7. 
						
  7. git移除文件夹的版本控制
			
    案例背景:git提交的时候把bin文件下的各种.dll提交上去了,然后每次提交都得提交好多文件,很容易忽略你真正修改的东西,故对这些不必要的东西忽略掉 解决方案:git rm 命令参数 具体实施: 1 ...
    
			
    8. 
						
  8. ASP.NET 之 MVC框架及搭建
			
    一.MVC简介 MVC:Model-View-Controller(模型-视图-控制器),MVC是一种软件开发架构模式. 1.模型(Model) 模型对象是实现应用程序数据域逻辑的应用程序部件. 通常 ...
    
			
    9. 
						
  9. [日常] PHP设置 include_path 配置选项
			
    动态设置php.ini中的include_path 配置选项: 两种方式set_include_path($new_include_path)ini_set('include_path',$new_i ...
    
			
    10. 
						
  10. iOS开发消息推送原理
			
    转载自:http://www.cnblogs.com/cdts_change/p/3240893.html 一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Prov ...
    
			
    11.