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. win7使用命令
			
    osk 屏幕键盘 perfmon 性能监视器 PresentationSettings 演示设置 recdisc.exe 创建系统恢复光盘 regedt32 注册表编辑器 rekeywiz 加密文件系 ...
    
			
    2. 
						
  2. flask小demo-数据查询
			
    mysqlconn-flask.py # -*- coding: utf-8 -*- #coding=utf-8 import os import mysql.connector from flask ...
    
			
    3. 
						
  3. Pascal的3种注释
			
    1.单行注释 {大括号里的内容都被注释掉} 2.单行注释2 //这种注释几乎是绝大部分语言中通用的了 3.多行注释 (*pascal的多行注释有点奇怪,使用的是:括号+星号的方式*)       其他 ...
    
			
    4. 
						
  4. cgroups简单使用
			
    Cgroups控制系统资源的分配(cpu.mem.io) 1.cgroups概述 CGroup是Linux内核提供的可以限制.隔离进程组 (process groups) 所使用的物理资源 (如 cp ...
    
			
    5. 
						
  5. redis High Availability---Redis Sentinel翻译
			
    注意,本文档为最新(11月21日),旧版本的可以参考:http://redis.io/topics/sentinel-old 不鼓励使用旧版本的文档. Redis Sentinel是一个用来管理Red ...
    
			
    6. 
						
  6. clientX/Y  pageX/Y  offsetX/Y  layerX/Y  screenX/Y clientHeight innerWidth...
			
    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...
    
			
    7. 
						
  7. SpringBoot相关配置
			
    8.1 配置 Spring MVC的配置是通过继承WebMvcConfigurerAdapter类并重载其方法实现的; 前几个教程已做了得配置包括 01点睛Spring MVC 4.1-搭建环境 配置 ...
    
			
    8. 
						
  8. Mysql5.5升级到5.6步骤详解 小版本大版本
			
    http://blog.csdn.net/i_team/article/details/9935693 小版本升级,先关闭数据库,然后mv直接全部替换掉mysql目录下的bin/ ,lib/ ,sha ...
    
			
    9. 
						
  9. Jsp&Servlet入门级项目全程实录第3讲
			
    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 1.建立数据表及数据(略) 2.装载驱动,建立数据表 <link rel="stylesheet&qu ...
    
			
    10. 
						
  10. Java使用Redisson分布式锁实现原理
			
    本篇文章摘自:https://www.jb51.net/article/149353.htm 由于时间有限,暂未验证 仅先做记录.有大家注意下哈(会尽快抽时间进行验证) 1. 基本用法 添加依赖 &l ...
    
			
    11.