Angularjs 如何实现这个动画？
这个地址所示的例子是我用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);
}
});
jquery HTML angularjs JavaScript css3动画
蛋包饭茶水卫门
9 years, 3 months ago
Answers
直接用transition过渡动画也可以实现
<html>
<head>
<meta charset="UTF-8">
<title>angularJs动画</title>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular-animate.js" data-semver="1.4.3"></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;
}
.div.ng-enter,
.div.ng-leave {
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.div.ng-enter {
-webkit-transform: scale(0);
}
.div.ng-enter-active {
-webkit-transform: scale(1);
}
.div.ng-leave-active {
-webkit-transform: scale(0);
}
</style>
</head>
<body>
<div ng-app="myapp" ng-controller="mytest">
<button ng-click="add()">Click to Add</button>
<p>Click the red circle to remove it</p>
<div class="div" ng-repeat="t in test" ng-click="delete($index)">
{{t.value}}
</div>
</div>
</body>
</html>
angular.module('myapp', ['ngAnimate'])
.controller('mytest', function($scope) {
$scope.test = [
{value: 1}, {value: 2}, {value: 3}, {value: 4}, {value: 5}
];
$scope.delete = function(index) {
$scope.test.splice(index, 1);
}
$scope.add = function() {
var a = Math.round(Math.random() * 10);
$scope.test.push({value: a});
}
});
我也有ID了
answered 9 years, 3 months ago
先上
demo
（我使用的
Angular
的版本是
1.4.3
）
基本上在
CSS
样式上添加一些特定的类就可以了，所以先让你看看我的
CSS
文件：
h1{
text-align: center;
}
button{
text-align: center;
width: 180px;
height: 30px;
margin: 0 auto;
line-height: 30px;
font-size: 15px;
}
.circle{
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;
transition:transform 0.3s ease;
-webkit-transition:transform 0.3s ease;
-ms-transition:transform 0.3s ease;
-moz-transition:transform 0.3s ease;
transform:scale(1);
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
}
.circle.ng-enter{
animation: my_enter_animation 0.5s linear;
-webkit-animation: my_enter_animation 0.5s linear;
}
.circle.ng-leave {
animation: my_leave_animation 0.5s linear;
-webkit-animation: my_leave_animation 0.5s linear;
}
@keyframes my_enter_animation {
from {
opacity:0;
transform:scale(0);
-webkit-transform:scale(0);
-ms-transform:scale(0);
-moz-transform:scale(0);
}
to {
opacity:1;
transform:scale(1);
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
}
}
@-webkit-keyframes my_enter_animation {
from {
opacity:0;
transform:scale(0);
-webkit-transform:scale(0);
-ms-transform:scale(0);
-moz-transform:scale(0);
}
to {
opacity:1;
transform:scale(1);
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
}
}
@keyframes my_leave_animation {
from {
opacity:1;
transform:scale(1);
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
}
to {
opacity:0;
transform:scale(0);
-webkit-transform:scale(0);
-ms-transform:scale(0);
-moz-transform:scale(0);
}
}
@-webkit-keyframes my_leave_animation {
from {
opacity:1;
transform:scale(1);
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
}
to {
opacity:0;
transform:scale(0);
-webkit-transform:scale(0);
-ms-transform:scale(0);
-moz-transform:scale(0);
}
}
其实主要就是添加了两个类
circle.ng-enter
和
circle.ng-leave
，利用
AngularJS
的动画机制，很方便的就实现了你想要的效果。
我的HTML代码如下：
<body ng-controller="MyController as vm">
<h1>AngularJS的解决方案</h1>
<button ng-click="vm.add()">点击添加</button>
<hr/>
<div class="circle" ng-repeat="c in vm.lists" ng-bind="c | number: 0" ng-click="vm.remove($index)">
</div>
</body>
我的JS文件如下：
(function(){
angular.module("MyApp", ['ngAnimate'])
.controller("MyController", MyController);
MyController.$inject = [];
function MyController(){
var vm = this;
vm.lists = [1,2,3];
vm.add = add;
vm.remove = remove;
function add(){
var item = Math.random()*10;
vm.lists.push(item);
}
function remove(index){
if(vm.lists.length){
vm.lists.splice(index, 1);
}
}
}
})();
应该就是这样了。
chris8250
answered 9 years, 3 months ago
