angularJs动画 --实例
1、angularJs動畫
AngularJS 使用動畫需要引入 angular-animate.min.js 庫。還需在應用中使用模型 ngAnimate：
<body ng-app="ngAnimate">實例1、
<body?ng-app="ngAnimate">
隱藏 DIV:?<input?type="checkbox"?ng-model="myCheck">
<div?ng-hide="myCheck"></div>
</body>
如果我們應用已經設置了應用名，可以把 ngAnimate 直接添加在模型中：
<body?ng-app="myApp">
<h1>隱藏 DIV:?<input?type="checkbox"?ng-model="myCheck"></h1>
<div?ng-hide="myCheck"></div>
<script>
var?app = angular.module('myApp', ['ngAnimate']);
</script>
ngAnimate 做了什么?
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素產生動畫，但是 ngAnimate 會監測事件，類似隱藏顯示 HTML 元素 ，如果事件發生 ngAnimate 就會使用預定義的 class 來設置 HTML 元素的動畫。
AngularJS 添加/移除 class 的指令:
- ng-show
- ng-hide
- ng-class
- ng-view
- ng-include
- ng-repeat
- ng-if
- ng-switch
ng-show?和?ng-hide?指令用于添加或移除?ng-hide?class 的值。
其他指令會在進入 DOM 會添加?ng-enter?類，移除 DOM 會添加?ng-leave?屬性。
當 HTML 元素位置改變時，ng-repeat?指令同樣可以添加?ng-move?類 。
此外， 在動畫完成后，HTML 元素的類集合將被移除。例如：?ng-hide?指令會添加一下類：
- ng-animate
- ng-hide-animate
- ng-hide-add?(如果元素將被隱藏)
- ng-hide-remove?(如果元素將顯示)
- ng-hide-add-active?(如果元素將隱藏)
- ng-hide-remove-active?(如果元素將顯示)
這個實例主要標明：當你復選框選中時，讓div背景透明度等于0慢慢變成1顯示；
當你沒選中復選框時，讓div背景透明度等于1慢慢變成0隱藏；
css代碼：
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: blue;
transition: all 1s ease;//我們可以使用 CSS transition(過渡) 或 CSS 動畫讓 HTML 元素產生動畫效果，
}
#box.ng-leave{
opacity:1,
}
#box.ng-leave-active{
opacity: 0;
}
#box.ng-enter{
opacity: 0;
}
#box.ng-enter-active{
opacity: 1;
}
</style>
<body ng-controller="test">
<input type="checkbox" ng-model='myCheck'/>
<div ng-if="myCheck" id="box"></div>
//注意：引入angular-animate.js庫
<script src="angular.min.js"></script>
<script src="angular-animate.js"></script>
<script>
var app=angular.module("app",['ngAnimate']);
app.controller("test",function($scope){
$scope.myCheck=true;
})
</script>
</body>
轉載于:https://www.cnblogs.com/liangxiaoli/p/7090770.html
總結
以上是生活随笔為你收集整理的angularJs动画 --实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web公路，新手上路！NO.2 [ 基础
- 下一篇： mybatis的配置文件中selectK