• AngularJs $animate 让页面动起来


    $animate

    $animate服务提供了基本的DOM操作功能如在DOM里插入、移除和移动元素,以及添加和删除类。这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的动画。

    $animate在Angular核心都是有效的,无论如何,这个服务为了支持所有动画须包含ngAnimate模块。否则,$animate只能做简单的DOM操作。

    方法

    enter(element,parent,after,[done]);

    在DOM中,将一个元素插入到元素后面或作为第一个子元素插入父元素。一旦完成,done()将会被回调(如果done()存在)。

    element:被插入到DOM的元素。

    parent:将会被插入子元素的父元素。(如果下一个元素不存在)。

    after:后面插入元素的兄弟元素。

    done:当元素被插入DOM后执行的回调函数。

    leave(element,[done]);

    从DOM中移除元素。一旦完成,done()将会被调用(如果done()存在)。

    element:将会被从DOM中移除的元素。

    done:当元素被从DOM删除后执行的回调函数。

    move(element,parent,after,[done]);

    将提供的元素在DOM中移动位置,在父元素的内部或者兄弟元素之间。一旦完成,该done()将会被回调(如果done()存在)

    element:在DOM中被移动的元素。

    parent:将会被插入子元素的父元素。(如果下一个元素不存在)。

    after:后面被放置元素的兄弟元素。

    done:当元素在DOM中被移动后执行的回调函数。

    addClass(element,className,[done]);

    给提供的元素添加提供的CSS类名。一旦完成,done()将会被调用(如果done()存在)。

    element:将会被添加class名称的元素。

    className:将会被提供的css类。

    done:当css类被添加到元素中后执行的回调函数。

    removeClass(element,className,[done]);

    给提供的元素移除提供的CSS类名。一旦完成,done()将会被调用(如果done()存在)。

    element:将会被移除class名称的元素。

    className:将会被移除的css类。

    done:当css类被从元素中移除后执行的回调函数。

    setClass(element,add,remove,[done]);

    在元素中添加或者移除给定的css类名。一旦完成,done()将会被调用(如果done()存在)。

    element:被设置CSS类的元素。

    add:将会被添加到元素的CSS类。

    remove:将会从元素上移除的CSS类。

    done:当元素中的css类被设置后执行的回调函数。

    实现animate动画代码1:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>$animate</title>
      <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
      <script src="../angular-1.4.7/angular.js"></script>
      <script src="../angular-1.4.7/angular-animate.js"></script>
      <style type="text/css" media="screen">
          .fade { width: 100px;
                  height: 100px;
                  background-color: #ff9933;
                  transition: 1s linear all;
                  -webkit-transition: 1s linear all; }
              .fade.ng-enter { opacity: 0; }
                  .fade.ng-enter.ng-enter-active { opacity: 1; }
              .fade.ng-leave { opacity: 1; }
                  .fade.ng-leave.ng-leave-active { opacity: 0; }
      </style>
    </head>
    <body ng-app="Demo" ng-controller="testCtrl as ctrl">
        <button my-dir>Fade in/out</button>
    <script type="text/javascript">
      (function(){
         var app = angular.module('Demo', ["ngAnimate"])
         .directive("myDir", ["$animate", "$compile", myDir])
         .controller('testCtrl',angular.noop);
         function myDir($animate, $compile) {
             function link(scope, element, attr) {
                 var isAppended = false;
                 var parent = element.parent();
                 var box;
                 element.on('click', function () {
                     isAppended = !isAppended;
                     if (isAppended) {
                         box = angular.element('<div class="fade"></div>');
                         scope.$apply($animate.enter(box, parent, element, function () {
                             console.log("Done entering");
                         }));
                     } else {
                         scope.$apply($animate.leave(box, function () {
                             console.log("Done leaving");
                         }));
                     }
                 });
             }
             return {
                 link: link
             };
         }
      }());
    </script>
    </body>
    </html>

    实现animate动画代码2:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>$animate</title>
      <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
      <script src="../angular-1.4.7/angular.js"></script>
      <script src="../angular-1.4.7/angular-animate.js"></script>
      <style type="text/css" media="screen">
        .fade { transition: 1s linear all; -webkit-transition: 1s linear all; }
            .fade.ng-enter { opacity: 0; }
                .fade.ng-enter.ng-enter-active { opacity: 1; }
            .fade.ng-leave { opacity: 1; }
                .fade.ng-leave.ng-leave-active { opacity: 0; }
      </style>
    </head>
    <body ng-app="Demo" ng-controller="testCtrl as ctrl">
            <div>
            <h1>Test List</h1>
            <ul>
                <li ng-repeat="item in ctrl.items" class="fade">{{item.value}}
              <a href="javascript:void(0);" ng-click="ctrl.removeItem($index)">close</a>
                </li>
            </ul>
            <br />
             <input type="text" ng-model="ctrl.item.value" />
          <button ng-click="ctrl.addItem()">Add Item</button>
        </div>
    <script type="text/javascript">
      (function(){
         var app = angular.module('Demo', ["ngAnimate"])
         .controller('testCtrl',testCtrl);
         function testCtrl() {
            this.items = [
               { value: "AAAAA" },
               { value: "BBBBB" },
               { value: "CCCCC" },
               { value: "DDDDD" },
               { value: "EEEEE" }
            ];
            this.addItem = function () {
                this.items.push(this.item);
                this.item = {};
            };
            this.removeItem = function (index) {
                this.items.splice(index, 1);
            };
         }
      }());
    </script>
    </body>
    </html>

    实现animate动画代码3:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>$animate</title>
      <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
      <script src="../angular-1.4.7/angular.js"></script>
      <script src="../angular-1.4.7/angular-animate.js"></script>
    </head>
    <body ng-app="Demo" ng-controller="testCtrl as ctrl">
        <div>
            <h1>Test List</h1>
            <ul>
                <li ng-repeat="item in ctrl.items" class="fade">{{item.value}}
              <a href="javascript:void(0);" ng-click="ctrl.removeItem($index)">remove</a>
                </li>
            </ul>
            <br />
             <input type="text" ng-model="ctrl.item.value" />
          <button ng-click="ctrl.addItem()">Add item</button>
            <br />
            <button ng-click="ctrl.bottomToTop()">我要上头条!!!</button>
        </div>
    <script type="text/javascript">
      (function(){
         var app = angular.module('Demo', ["ngAnimate"])
         .animation('.fade', fade)
         .controller('testCtrl',testCtrl);
         function fade() {
             return {
                 enter: function (element, done) {
                     element.css('display', 'none');
                     $(element).fadeIn(1000, function () {
                         done();
                     });
                 },
                 leave: function (element, done) {
                     $(element).fadeOut(1000, function () {
                         done();
                     });
                 },
                 move: function (element, done) {
                     element.css('display', 'none');
                     $(element).slideDown(500, function () {
                         done();
                     });
                 }
             }
         }
         function testCtrl() {
            this.items = [
               { value: "AAAAA" },
               { value: "BBBBB" },
               { value: "CCCCC" },
               { value: "DDDDD" },
               { value: "EEEEE" }
            ];
            this.addItem = function () {
                this.items.push(this.item);
                this.item = {};
            };
            this.removeItem = function (index) {
                this.items.splice(index, 1);
            };
            this.bottomToTop = function () {
                this.items.unshift(this.items.pop());
            };
         }
      }());
    </script>
    </body>
    </html>

    更多效果,可在google搜"$animate",百度资料太少了额,质量也不行...

  • 相关阅读:
    添加远程库
    远程仓库
    删除url中某个参数
    html2canvas.js——HTML转Canvas工具
    vue-cli3与vue-cli2的区别和vue-cli 怎么修改配置
    vue打包后出现一些map文件的解决方法
    微信app右上角自带分享功能
    微信授权获取用户openId的方法和步骤
    支付宝小程序webview里的h5跳转回小程序
    new Date
  • 原文地址:https://www.cnblogs.com/ys-ys/p/4987022.html
Copyright © 2020-2023  润新知