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. Sington单例模式(创建型模式)
			
    一.使用Sington单例模式的动机(Motivation) 在软件系统中,经常有一些特殊的类,必须保证它们只有一个实例,才能保证它的逻辑正确性.以及良好的效率. 大多数类用的是常规的构造器,所以往往 ...
    
			
    2. 
						
  2. ActiveMQ--HelloWorld
			
    下载windows版本ActiveMQ,apache-activemq-5.15.3\bin\win64\activemq.bat 启动mq,ActiveMQ内置jetty,默认端口8161,默认用户 ...
    
			
    3. 
						
  3. 如何删除Eclipse里某个工作空间？
			
    很多时候,一个Eclipse中或多或少的都会有那么几个工作空间(workspace),但是久而久之你会发现有些工作空间你觉得不再需要了或者觉得碍眼,怎么办? 其实很简单,方法有两种. 1.打开你的Ec ...
    
			
    4. 
						
  4. javac之Inferring Type Arguments Based on Actual Arguments
			
    We use the following notational conventions in this section: Type expressions are represented using  ...
    
			
    5. 
						
  5. js拼图
			
    ;(function($){ function arrayIndexOf(r, num){ if( Array.prototype.indexOf ){ return r.indexOf(num);  ...
    
			
    6. 
						
  6. 二维码ZBar之ZBarReaderView
			
    参考:http://www.chinatarena.com/Html/iospeixun/201301/3985.html   http://blog.csdn.net/chenyong05314/a ...
    
			
    7. 
						
  7. 16.Generator 函数的异步应用
			
    Generator 函数的异步应用 Generator 函数的异步应用 异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是"单线程"的,如果没有异 ...
    
			
    8. 
						
  8. 【转】Visio绘制WEB流程图的心得
			
    一个哥们在MSN上告诉我,他们公司的交互设计师只产出流程图,并问我用什么标准评价流程图的好坏.他的说法把我彻底震了-这分工也太细了吧!也不知道该说他们那里这样是好还是不好. 不过仔细想来,我倒的确没有 ...
    
			
    9. 
						
  9. Mysql5.5升级到5.6步骤详解 小版本大版本
			
    http://blog.csdn.net/i_team/article/details/9935693 小版本升级,先关闭数据库,然后mv直接全部替换掉mysql目录下的bin/ ,lib/ ,sha ...
    
			
    10. 
						
  10. WPF Trigger for IsSelected in a DataTemplate for ListBox items
			
    <DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlugView /> ...
    
			
    11.