热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ngAnimate插件是做什么的?-

ngAnimate插件是做什么的?ngAnimate插件如其名字一样是为元素提供动画的。怎么定义动画?第一步必须是引入插件<scriptsrc"cdn.bootcss.comangular.js1.3.20angular.js?1.1.11"><script><scriptsrc"cdn.bootcss.comangular.js1.3

ngAnimate插件是做什么的?

ngAnimate插件如其名字一样是为元素提供动画的。

怎么定义动画?

第一步必须是引入插件

第二步让app引入(依赖)这个插件


var appH5=angular.module("app",[&#39;ngAnimate&#39;]);
appH5.controller("myTabCtrl",[&#39;$scope&#39;,function($scope){
         $scope.isShow=true;
}])
我是要动画的元素
添加动画的第一种方式:通过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
我是要动画的元素


  • 为什么添加样式就可以产生动画?
    当元素进入页面时,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
    {{new.title}}

刚才说通过新建和删除元素来实现的指令是可以进行动画的,那么只是更改样式显示或者隐藏元素的指令(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)
        }
    }
});

以上就是ngAnimate插件是做什么的?的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Java学习笔记之使用反射+泛型构建通用DAO
    本文介绍了使用反射和泛型构建通用DAO的方法,通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作,从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]
  • 原理:dismiss再弹出,把dialog设为全局对象。if(dialog!null&&dialog.isShowing()&&!(Activity.)isFinishing()) ... [详细]
  • 本文详细介绍了在Centos7上部署安装zabbix5.0的步骤和注意事项,包括准备工作、获取所需的yum源、关闭防火墙和SELINUX等。提供了一步一步的操作指南,帮助读者顺利完成安装过程。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
author-avatar
angel青彤雪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有