如何用angularjs实现这个动画

How to achieve this animation by angularjs?

本文关键字：动画 实现 何用 angularjs      更新时间：2023-09-26

我已经用jquery做了一个:http://infinitynewtab.com/test/2/index.html

我想知道如何通过angularjs实现:http://infinitynewtab.com/test/1/index.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>
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);
    }
});

从Angular v1.2开始，你不会在HTML中使用ngAnimate指令(ng-animate属性)。相反，在CSS中定义ng-leave和ng-leave-active类:

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});
    }
});
.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 .5s linear;
    transition: all .5s linear;
}
.div.ng-enter {
    -webkit-transform: scale(0);
}
.div.ng-enter-active {
    -webkit-transform: scale(1);
}
.div.ng-leave-active {
    -webkit-transform: scale(0);
}
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular-animate.js" data-semver="1.4.3"></script>
<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>

还请注意，在这种情况下track by $index有一个问题，因此最好更改对象数组的数据结构，以便在删除项的情况下正确跟踪(参见讨论)。最后，我删除了delete array方法，因为简单的Array.prototype.splice更干净有效。

相关文章：