AngularJS动画(一)
一、AngularJS动画 1.AngularJS提供了动画效果,可以配合Css使用。 2.AngularJS使用动画需要引入 angular-animate.ming.js库 3.需要在模块创建时引入'ngAnimate'模块 var app = angular.module('myApp',['ngAnimate']);4.AngularJS在加载成功后也会向当前页面添加一段基本的css样式 5.可以使用一些定好的一些动画库: http://augus.github.io/ngAnimate/ https://github.com/Augus/ngAnimate
二、ngAnimate工作原理 ngAnimate 模型可以添加或移除 class 。 ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。 AngularJS 添加/移除 class 的指令:
其他指令会在进入 DOM 会添加 当 HTML 元素位置改变时, 此外, 在动画完成后,HTML 元素的类集合将被移除。例如:
1.引用: <link href="../Content/bootstrap.min.css" rel="stylesheet" /> <script src="../Scripts/Angular/angular.min.js"></script> <script src="../Scripts/Angular/angular-animate.min.js"></script> 2.自定义样式: /*自定义处理样式*/ .panel { transition: all linear 0.5s; position: relative; left: 0; top: 0; width: 200px; height: 100px; margin-top: 200px; } .ng-hide { height: 0; width: 0; top: -200px; left: 200px; } .text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 3.HTMl: <div class="container" ng-app="myApp"> <label> <input type="checkbox" ng-model="myCheck" /> 隐藏panel </label> <div class="panel panel-danger" ng-hide="myCheck"> <div class="panel-heading"> <div class="panel-title text-overflow">主面板</div> </div> <div class="panel-body"> </div> </div> </div> <script> var app = angular.module('myApp',['ngAnimate']); </script>显示: 四、基于Css的动画效果,实例2之ng-if指令,ng-enter,ng-enter-active,ng-animate 1.定义ng-if使用的样式 /*自定义处理样式*/ .fade { opacity: 1; } .fade.ng-enter { /* 当使用css transition实现动画效果时,在开始时的样式中必须包含transition的设置 */ transition: 5s linear all; opacity: 0; } /*结束时的样式*/ .fade.ng-enter.ng-enter-active { opacity: 1; }2.html绑定: <div class="container" ng-app="myApp"> <div ng-if="bool" class="fade"> <button class="btn btn-default">按钮样式1</button> <button class="btn btn-primary">按钮样式2</button> </div> <button ng-click="bool=true">Fade In!</button> <button ng-click="bool=false">Fade Out!</button> </div> <script> var app = angular.module('myApp',['ngAnimate']); </script>3.过程说明: Step 1(点击前,如前面所说,ngIf在触发前,DOM中并没有div):
Step 3(动画执行完后,示例中是5s后,ng-animate、ng-enter、ng-enter-active被移除,div的状态为ng-enter-active中指定的状态):
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 更改bootstrap-datetimepicker弹出日期选择框只能
- AngularJS – 从partial in指令中获取html
- Scala的apply unapply unapplySeq 语法糖
- 【BootStrap】--登录加载模态框提示
- bootstrap 1/23/2015
- Redis Sentinel集群部署
- twitter-bootstrap – 使用Twitter Bootstrap 3的
- angular rc1:EXCEPTION:错误:未捕获(在承诺中
- redis 有序集合ZRANGEBYSCORE获取所有 score 值介
- case-class上的`productElement(i)`是否使用反射