这个地址所示的例子是我用Jquery实现的这个动画:http://infinitynewtab.com/test/2/index.html
点击增加会增加一个圆圈并带有动画效果,点击任意一个圆圈它会消失并带有动画效果。
在angularjs上可以实现增加删除,想请问要加上动画效果该如何实现?
angularjs示例地址:http://infinitynewtab.com/test/1/index.html
html+css
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>angularJs动画</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/main.js"></script>
<style>
.div{
width:80px;
height:80px;
margin:50px;
float: left;
background-color:red;
border-radius:100%;
text-align:center;
font-size:30px;
line-height:80px;
color:#fff;
cursor: pointer;
}
</style>
</head>
<body ng-controller='mytest'>
<button ng-click="add()" style="position: absolute;">增加一个</button>
<div class="div" ng-repeat="t in test track by $index" ng-click="delete($index)" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
{{t}}
</div>
</body>
</html>
js:
Array.prototype.remove=function(dx) {
if(isNaN(dx)||dx>this.length){return false;}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}
var app = angular.module('myapp',['ngRoute','ngAnimate']);
app.controller('mytest',function($scope){
$scope.test=[
1,2,3,4,5
];
$scope.delete=function(index){
$scope.test.remove(index);
}
$scope.add=function(){
var a=Math.round(Math.random()*10);
$scope.test.push(a);
}
});
先上demo (我使用的
Angular
的版本是1.4.3
)基本上在
CSS
样式上添加一些特定的类就可以了,所以先让你看看我的CSS
文件:其实主要就是添加了两个类
circle.ng-enter
和circle.ng-leave
,利用AngularJS
的动画机制,很方便的就实现了你想要的效果。我的HTML代码如下:
我的JS文件如下:
应该就是这样了。