AngularJs $animate 讓頁面動起來

時間 2019-11-20

標籤 angularjs animate 頁面起來欄目 AngularJS 简体版

原文原文鏈接

$animatejavascript

$animate服務提供了基本的DOM操做功能如在DOM裏插入、移除和移動元素，以及添加和刪除類。這個服務是ngAnimate的核心服務，爲CSS和Javascript提供了高檔次的動畫。css

$animate在Angular核心都是有效的，不管如何，這個服務爲了支持全部動畫須包含ngAnimate模塊。不然，$animate只能作簡單的DOM操做。html

方法：java

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

在DOM中，將一個元素插入到元素後面或做爲第一個子元素插入父元素。一旦完成，done()將會被回調（若是done()存在）。web

element：被插入到DOM的元素。app

parent：將會被插入子元素的父元素。（若是下一個元素不存在）。ide

after：後面插入元素的兄弟元素。函數

done：當元素被插入DOM後執行的回調函數。oop

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"，百度資料太少了額，質量也不行...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。