码迷,mamicode.com
首页 > Web开发 > 详细

angularjs动画-ngAnimate--快速上手、使用

时间:2017-04-05 15:27:02      阅读:1450      评论:0      收藏:0      [点我收藏+]

标签:htm   class   nbsp   小结   linear   style   定义   ram   循环列表   

AngularJS 动画

AngularJS 提供了动画效果,可以配合 CSS 使用。

AngularJS 使用动画需要外部引入 angular-animate.js 库。

1.把ngAnimate依赖注入写入当前的myApp模块中;

<script>
var app = angular.module(‘myApp‘, [‘ngAnimate‘]);
</script>
2.ngAnimate模型的作用:

ngAnimate 模型可以添加或移除 class类

ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

  • ng-show   移除class类为.ng-hide的值
  • ng-hide   添加class类为.ng-hide的值
  • ng-class  动态绑定一个或多个 CSS 类
  • ng-view  
  • ng-include  包含外部的 HTML 文件
  • ng-repeat 循环列表
  • ng-if      用于在表达式为 false 时移除 HTML 元素
  • ng-switch  根据表达式显示或隐藏对应的部分

除了ng-show 和 ng-hide 之外,其他指令会在进入 DOM 会添加 ng-enter 类移除 DOM 会添加 ng-leave 属性

当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类

此外, 在动画完成后,HTML 元素的类集合将被移除

例如: ng-hide 指令会添加一下类:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (如果元素将被隐藏)
  • ng-hide-add-active (如果元素将隐藏)
  • ng-hide-remove (如果元素将被显示)
  • ng-hide-remove-active (如果元素将显示)

3.通常使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果,

  例如使用css过渡:

<style>
div {
    transition: all linear 0.5s;
   
    height: 100px;
}
.ng-hide {
    height: 0;
}
</style>

  例如使用css动画,更方法,都要考虑到兼容(IE10以上才支持)

<style>
@keyframes myChange {
    from {
        height: 100px;
    } to {
        height: 0;
    }
}
div {
    height: 100px;
}
div.ng-hide {
    animation: 0.5s myChange;
}
</style>

 

小结:ngAnimate在显示隐藏时,是通过类ng-hide来控制的;其他则是ng-enter 类, ng-leave 属性。现在可以百度一下其他指令的具体用法!

angularjs动画-ngAnimate--快速上手、使用

标签:htm   class   nbsp   小结   linear   style   定义   ram   循环列表   

原文地址:http://www.cnblogs.com/liangliangjiang/p/6668863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!