phpstudy集成环境

 首页 > Angularjs 如何实现这个动画？

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

直接用transition过渡动画也可以实现

<html>
<head>
    <meta charset="UTF-8">
    <title>angularJs动画</title>
    <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>
    <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});
    }
});

先上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);
            }
        }
    }
})();

应该就是这样了。

【热门文章】
【热门文章】