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. 《LeetBook》leetcode题解(18) : 4Sum[M]
			
    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
    
			
    2. 
						
  2. Android 开发工具类 05_Logcat 统一管理类
			
    Logcat 统一管理类: 1.默 认tag 的函数: 2.自定义 tag 的函数. import android.util.Log; // Logcat 统一管理类 public class L { ...
    
			
    3. 
						
  3. 《垃圾回收的算法与实现》——GC标记-压缩算法
			
    基本算法 Mark-Compact与Mark-Sweep的第一阶段均为标记活跃对象,第二阶段则不同,压缩算法则是将活跃对象逻辑上移到一起. Lisp2算法 对象头中增加forwarding指针,其用法 ...
    
			
    4. 
						
  4. javascript技巧总结
			
    1.删除前后空格 String.prototype.trim = function () { return this.replace(/(^[ | ])|([ | ]$)/g, "" ...
    
			
    5. 
						
  5. VMware Workstation 11 中 Ubuntu 14.04 的 VMware Tools 问题 ：没有显示共享文件夹
			
      症状:主要表现在Win7中用VM11安装的Ubuntu14.04中,安装完自带的VMware Tools之后,/mnt/hgfs 中没有前面已经设置好的共享文件夹.   仔细查看了安装过程,发现在 ...
    
			
    6. 
						
  6. redis-springdata-api
			
    使用StringRedisTempalte操作redis五种数据类型 spring-data中继承了redisTemplate, 提供redis非切片连接池 代码github地址: https://g ...
    
			
    7. 
						
  7. Golang cron 定时任务使用
			
    1.cron 表达式的基本格式 用过 linux 的应该对 cron 有所了解.linux 中可以通过 crontab -e 来配置定时任务.不过,linux 中的 cron 只能精确到分钟.而我们这 ...
    
			
    8. 
						
  8. Behave step matcher
			
    behave 提供3中step匹配模式 'parse' 'cfparse' 基于parse的扩展,  支持cardinality field syntax? 're' 支持在step中定义正则表达式  ...
    
			
    9. 
						
  9. js 背景自动切换
			
    //首页自动更换背景特效开始============================================ var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组 ...
    
			
    10. 
						
  10. Jsp&Servlet入门级项目全程实录第8讲
			
    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.添加dao public int studentAdd(Connection con,Student studen ...
    
			
    11.