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. SSH 转发学习【转】
			
    本地端口转发 假定有三台主机A.B.C.由于种种原因(无论是防火墙还是路由原因),AC两台主机之间无法连通.但是B却可以和A.C连通.这时候就可以用本地端口转发来实现A和C通过B来连通. A 192. ...
    
			
    2. 
						
  2. 【jQuery源码】工具函数
			
    //扩展工具函数 jQuery.extend({ // Unique for each copy of jQuery on the page expando: "jQuery" + ...
    
			
    3. 
						
  3. 关于Gen生成try-catch-finally
			
    例1: class TestExc extends Exception{} void tryItOut () throws TestExc{} void handleExc(Object o){} v ...
    
			
    4. 
						
  4. 删除none 的images报错 image has dependent child images 解决办法
			
    这个错是因为在要删除的images之后创建了该images的父images 方法: docker image inspect --format='{{.RepoTags}} {{.Id}} {{.Pa ...
    
			
    5. 
						
  5. elasticsearch（三） 之 elasticsearch目录介绍和配置文件详解
			
    目录 elasticsearch 配置 目录详情 (config) 配置文件 elasticsearch.yml 配置集群名称(cluster.name) 配置 network.host 更改数据和储 ...
    
			
    6. 
						
  6. Maven Source Plugin
			
    项目pom文件build下添加配置: 01 <plugin> 02 <groupId>org.apache.maven.plugins</groupId> 03 & ...
    
			
    7. 
						
  7. [codeup] 1943 进制转换
			
    题目描述 将一个长度最多为30位数字的十进制非负整数转换为二进制数输出. 输入 多组数据,每行为一个长度不超过30位的十进制非负整数.(注意是10进制数字的个数可能有30个,而非30bits的整数)  ...
    
			
    8. 
						
  8. java.sql.SQLException: Access denied for user 'root '@'localhost' (using password: YES) 最蠢
			
    我犯了七年前的错误,一个空格,昨天就想到的,还对比了一下密码有没有空格 问题原因1:多写空格 在datasource.properties 中的username 的值root后面多写了一个空格, jd ...
    
			
    9. 
						
  9. linq之多表连接
			
    1.左连接: var LeftJoin = from emp in ListOfEmployees join dept in ListOfDepartment on emp.DeptID equals ...
    
			
    10. 
						
  10. 【转】sql server日期比较
			
    1. 当前系统日期.时间select getdate() 2. dateadd 在向指定日期加上一段时间的基础上,返回新的 datetime 值例如:向日期加上2天select dateadd(day ...
    
			
    11.