文档章节

angular.animation的使用

前端届的科比
 前端届的科比
发布于 2015/11/15 23:06
字数 577
阅读 274
收藏 4

overview

angular-animate.js插件可以对ng-repeat,ng-view,ui-view,ng-include,ng-switch,ng-if,ng-class,ng-show,ng-hide,form,ng-model等指令提供CSS3或者JS动画效果,这些指令分别两个梯队:

梯队一:DOM节点会被remove的梯队: if,view,repeat,include,switch

梯队二:DOM节点不会被remove,只是内容/样式会被改变的梯队: class, show, hide, model等

插件引入

  1. HTML中引入angular-animate.js, 地址
  2. 在angular中注入ngAnimate模块

ng-animate之CSS3动画

以ui-view为例:

  1. 引入angular-animate插件和注入ngAnimate模块
  2. 引入angular-ui-route.js,配置$stateProvider
  3. 在css定义ng-enterng-leave的样式,可以用transition/animation
  4. 预览页面即可看到动画效果

原理:ng在这个指令进行内容切换时,默认会给内容加上ng-enter,ng-enter-active或者ng-leave,ng-leave-active样式。如图: 输入图片说明

利用这个原理,我们就可以分别定义[ui-view]元素有上述class的样式和无上述class的样式,从而达到一个动画效果了。

但并不是每一个元素都是用ng-enter,ng-leave的,规则如下:

梯队一用的是:ng-enter, ng-enter-active, ng-leave, ng-leave-active (repeat: ng-enter-stagger animation-delay)

梯队二用的是:ng-hide-add, ng-hide-add-active, ng-hide-remove, ng-hide-remove-active

ng-animate之JavaScript动画

JavaScript实现动画的好处是兼容性好,具体的用法是在animation方法里返回一个对象,对象包含 enter/leave 或者 addClass/removeClass 方法的定义:

对于梯队一的指令,使用的是enter/leave:

angular.module("appAnimations", ["ngAnimate"])

// 注意使用的是css selector的animation-name
.animation(".anim", function(){
  return {
    //element:指令所在的DOM
    //done:指令封装好的方法,需要在动画结束时调用执行
    enter: function(element, done){
      $(element).animate({left: "100px"}, 1000, done)
    },

    leave: function(element, done){
      $(element).animate({left: "-100px"})
    }
  }
})

对于梯队二的指令,使用的是addClass/removeClass:

angular.module("appAnimations", ["ngAnimate"])

.animation(".anim", function(){
  return {
    //element:指令所在的DOM
    //className: 被添加/被去掉的类名
    //done:指令封装好的方法,需要在动画结束时调用执行
    addClass: function(element, className, done){
      if("active" != className) return
      $(element).animate({left: "100px"}, 1000, done)
    },

    removeClass: function(element, className, done){
      if("active" != className) return
      $(element).animate({left: "-100px"})
    }
  }
})

具体操作步骤:

  1. 引入angular-animate插件和注入ngAnimate模块
  2. 根据指令,选择并定义好上述animation方法
  3. 运行预览效果即可

参考资料:

© 著作权归作者所有

上一篇: HTML5实用手册
下一篇: angular实用手册
前端届的科比
粉丝 21
博文 64
码字总数 51572
作品 0
深圳
私信 提问
加载中

评论(1)

今天来找bug
今天来找bug
赞一个

暂无文章

用原生js对表格排序

本文转载于:专业的前端网站➸用原生js对表格排序 阿里的模拟笔试题,当时时间有限没写出来,其实是因为自己对原生dom操作不熟悉,这里补一下。 题目的大意是有一个表格,如代码所示 <table>...

前端老手
35分钟前
5
0
IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

HTML5有一些新的表单元素:<datalist>、<keygen>、<output>。不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性,仍然可以显示为常规的表单元素。 1 <datalist>元素 ...

老码农的一亩三分地
37分钟前
4
0
【朝花夕拾】Android自定义View篇之(一)View绘制流程

https://www.cnblogs.com/andy-songwei/p/10955062.html

shzwork
39分钟前
5
0
Qt编写自定义控件70-扁平化flatui

一、前言 对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产...

飞扬青云
48分钟前
3
0
教你玩转Linux—添加批量用户

添加和删除用户对每位Linux系统管理员都是轻而易举的事,比较棘手的是如果要添加几十个、上百个甚至上千个用户时,我们不太可能还使用useradd一个一个地添加,必然要找一种简便的创建大量用户...

Linux就该这么学
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部