首页 > 代码库 > angular中的动画效果

angular中的动画效果

2024-10-13 12:49:02   213人阅读

用angular来形成动画效果的代码如下

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="angular.min.js"></script>
    <script src="angular-animate.js"></script>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        //把angular中模块名和要引入的依赖模块写入
        var app = angular.module(‘app‘,[‘ngAnimate‘]);
        //angular中的控制台。先让div显示以便更好观察效果
        app.controller(‘ctrl‘,function($scope){
           $scope.btn = true;
        });
        //要形成动画效果的元素
        app.animation(‘.box‘,function(){
            //返回效果元素
            return {
                enter:function(element,done){
                    //出现时的初始值
                    $(element).css({‘width‘: 0, ‘height‘: 0});
                    //结束时的最终样式
                    $(element).stop().animate({‘width‘: 100, ‘height‘: 100}, 1000);
                },
                leave:function(element,done){
                    //消失时最终的效果
                    $(element).stop().animate({‘width‘: 0, ‘height‘: 0}, 1000, done);
                }
            }
        });

    </script>
</head>
<body ng-controller="ctrl">
<input type="checkbox"  ng-model="btn">

<div class="box" ng-if="btn"></div>
</body>
</html>

这样我们就可以通过angular来形成动画效果了，并且ngAnimate模型还可以添加或移除class

ngAnimate 模型其实并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

 

AngularJS 添加/移除 class 的指令:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (如果元素将被隐藏)
  • ng-hide-remove (如果元素将显示)
  • ng-hide-add-active (如果元素将隐藏)
  • ng-hide-remove-active (如果元素将显示)
下面我们看一个实例：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            transition: all 1s ease;
        }

        .box.ng-leave {
            opacity: 1;
        }

        .box.ng-leave-active {
            opacity: 0;
        }

        .box.ng-enter {
            opacity: 0;
        }
        .box.ng-enter-active{
            opacity: 1;
        }
    </style>
    <script src="angular.min.js"></script>
    <script src="angular-animate.js"></script>
    <script>
        var app = angular.module(‘app‘,[‘ngAnimate‘]);
        app.controller(‘ctrl‘,function($scope){
           $scope.btn = true;
        });

    </script>
</head>
<body ng-controller="ctrl">
<input type="checkbox"  ng-model="btn">

<div class="box" ng-if="btn"></div>
</body>
</html>
这个实例主要标明：当你复选框选中时，让div背景透明度等于0慢慢变成1显示；
　　　　　　　 　当你没选中复选框时，让div背景透明度等于1慢慢变成0隐藏；
但是这两个在我们快速点击的时候会形成一个bug，那就是因为上一个没有执行完而形成好几个正在过度的过程。
如果要解决这个bug的方法其实也挺简单，那就是在执行前先暂停一下。下面是代码；
 $(element).stop().animate({‘width‘: 0, ‘height‘: 0}, 1000, done);
不足之处望大家原谅
 

angular中的动画效果


联系
我们