用angular来形成动画效果的代码如下
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="angular.min.js"></script>
<script src="angular-animate.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
//把angular中模块名和要引入的依赖模块写入
var app = angular.module(‘app‘,[‘ngAnimate‘]);
//angular中的控制台。先让div显示以便更好观察效果
app.controller(‘ctrl‘,function($scope){
$scope.btn = true;
});
//要形成动画效果的元素
app.animation(‘.box‘,function(){
//返回效果元素
return {
enter:function(element,done){
//出现时的初始值
$(element).css({‘width‘: 0, ‘height‘: 0});
//结束时的最终样式
$(element).stop().animate({‘width‘: 100, ‘height‘: 100}, 1000);
},
leave:function(element,done){
//消失时最终的效果
$(element).stop().animate({‘width‘: 0, ‘height‘: 0}, 1000, done);
}
}
});
</script>
</head>
<body ng-controller="ctrl">
<input type="checkbox" ng-model="btn">
<div class="box" ng-if="btn"></div>
</body>
</html>
这样我们就可以通过angular来形成动画效果了，并且ngAnimate模型还可以添加或移除class
ngAnimate 模型其实并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：
ng-animateng-hide-animateng-hide-add(如果元素将被隐藏)ng-hide-remove(如果元素将显示)ng-hide-add-active(如果元素将隐藏)ng-hide-remove-active(如果元素将显示)
下面我们看一个实例：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
transition: all 1s ease;
}
.box.ng-leave {
opacity: 1;
}
.box.ng-leave-active {
opacity: 0;
}
.box.ng-enter {
opacity: 0;
}
.box.ng-enter-active{
opacity: 1;
}
</style>
<script src="angular.min.js"></script>
<script src="angular-animate.js"></script>
<script>
var app = angular.module(‘app‘,[‘ngAnimate‘]);
app.controller(‘ctrl‘,function($scope){
$scope.btn = true;
});
</script>
</head>
<body ng-controller="ctrl">
<input type="checkbox" ng-model="btn">
<div class="box" ng-if="btn"></div>
</body>
</html>
这个实例主要标明：当你复选框选中时，让div背景透明度等于0慢慢变成1显示；
当你没选中复选框时，让div背景透明度等于1慢慢变成0隐藏；
但是这两个在我们快速点击的时候会形成一个bug，那就是因为上一个没有执行完而形成好几个正在过度的过程。如果要解决这个bug的方法其实也挺简单，那就是在执行前先暂停一下。下面是代码；
$(element).stop().animate({‘width‘: 0, ‘height‘: 0}, 1000, done);不足之处望大家原谅
时间： 2024-10-15 08:30:58