Javascript 如何通过angularjs实现此动画？_Javascript_Jquery_Html_Angularjs

Javascript 如何通过angularjs实现此动画？

javascript jquery html angularjs

Javascript 如何通过angularjs实现此动画？,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我用jquery做了一个：我想知道angularjs是如何做到这一点的：我的意思是实现动画的过渡 HTML <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title>angularJs Animation</title> <script src="js/angular.min.js"></script> <script src="js/angu

我用jquery做了一个：

我想知道angularjs是如何做到这一点的：

我的意思是实现动画的过渡

HTML

<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>angularJs Animation</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;">Click to Add</button>
<br>
<p>Click the red circle to remove it</p>
<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>


angularJs动画
.分区{
宽度：80px；
高度：80px；
利润率：50像素；
浮动：左；
背景色：红色；
边界半径：100%；
文本对齐：居中；
字体大小：30px；
线高：80px；
颜色：#fff；
光标：指针；
}
单击以添加


单击红色圆圈将其删除
{{t}

Javascript

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);
    }
});

Array.prototype.remove=函数（dx）{
如果（isNaN（dx）| dx>此.length）{
返回false；
}
for（变量i=0，n=0；i

自Angular v1.2以来，您在HTML中不使用ngAnimate指令（

ng animate

属性）。相反，您可以在CSS中定义

ng leave

和

ng leave active

类：

angular.module（'myapp'，['ngAnimate']））
.controller（'mytest'，函数（$scope）{
$scope.test=[
{value:1}，{value:2}，{value:3}，{value:4}，{value:5}
];
$scope.delete=函数（索引）{
$范围测试拼接（索引1）；
}
$scope.add=函数（）{
var a=Math.round（Math.random（）*10）；
$scope.test.push（{value:a}）；
}
});
.div{
宽度：80px；
高度：80px；
利润率：50像素；
浮动：左；
背景色：红色；
边界半径：100%；
文本对齐：居中；
字体大小：30px；
线高：80px；
颜色：#fff；
光标：指针；
}
.div.ng-enter，
.第五组-左{
-webkit转换：所有.5s线性；
过渡：全部.5s线性；
}
.div.ng-enter{
-webkit变换：缩放（0）；
}
.分区ng-enter-active{
-webkit转换：规模（1）；
}
.分区ng-左-激活{
-webkit变换：缩放（0）；
}

单击以添加
单击红色圆圈将其删除
{{t.value}}
感谢您的回答，只想知道如何在单击“添加按钮”时制作“添加动画”，只需为.ng leave
和.ng leave active添加两条CSS规则即可。请参阅更新的答案。