16-Angular中的動畫

来源:http://www.cnblogs.com/xiaoxie53/archive/2016/01/14/5128450.html
-Advertisement-
Play Games

利用CSS3在Angular中實現動畫。直接看例子： ngAnimate插件1 引入angular-animate插件，我們綁定了ng-if指令，在刪除和添加DOM節點的時候，angular會添加指定的class，方便我們完成動畫。.ng-enter.ng-enter-active.n...


利用CSS3在Angular中實現動畫。

直接看例子：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件1</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">    
    .box{width:200px;height:200px;background-color:red;transition:1s all;}
    /*顯示操作*/
    .box.ng-enter{opacity:0;}
    .box.ng-enter-active{opacity:1;}
    /*隱藏操作*/
    .box.ng-leave{opacity:1;}
    .box.ng-leave-active{opacity:0;}
</style>
</head>
<body>

<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div class="box" ng-if="bBtn"></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngAnimate']);

m1.controller('Aaa',['$scope',function($scope){
    $scope.bBtn = true;
}]);

</script>
</body>
</html>

引入angular-animate插件，我們綁定了ng-if指令，在刪除和添加DOM節點的時候，angular會添加指定的class，方便我們完成動畫。

.ng-enter

.ng-enter-active

.ng-leave

.ng-leave-active

 

現在再看看顯示和隱藏。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件4</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
    .box{width:200px;height:200px;background-color:red;transition:1s all;}
    /*顯示操作*/
    .box.ng-hide-remove{opacity:0;}
    .box.ng-hide-remove-active{opacity:1;}
    /*隱藏操作*/
    .box.ng-hide-add{opacity:1;}
    .box.ng-hide-add-active{opacity:0;}
</style>
</head>
<body>

<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div class="box" ng-show="bBtn"></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngAnimate']);

m1.controller('Aaa',['$scope',function($scope){
    $scope.bBtn = true;
}]);

</script>
</body>
</html>

 

.ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active

這個例子我們使用的是ng-show，屬於顯示和隱藏。上一個例子是ng-if，屬於添加和刪除。

 

回顧上一節我們提到的路由，我們可以結合起來操作。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件2</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-animate.min.js"></script>
<style type="text/css">
    .box{transition:1s all;position:absolute;}
    /*顯示操作*/
    .box.ng-enter{opacity:0;}
    .box.ng-enter-active{opacity:1;}
    /*隱藏操作*/
    .box.ng-leave{opacity:1;}
    .box.ng-leave-active{opacity:0;}
</style>
</head>
<body>

<div ng-controller="Aaa">
    <a href="javascript:void(0);" ng-click="$location.path('aaa')">首頁</a>
    <a href="javascript:void(0);" ng-click="$location.path('bbb')">內容</a>
    <a href="javascript:void(0);" ng-click="$location.path('ccc')">標題</a>
    <div class="box" ng-view></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngRoute','ngAnimate']);
m1.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/aaa',{
        template : '<h1>AAA</h1>{{name}}',
        controller : 'Aaa'
    }).when('/bbb',{
        template : '<h1>BBB</h1>{{name}}',
        controller : 'Bbb'
    }).when('/ccc',{
        template : '<h1>CCC</h1>{{name}}',
        controller : 'Ccc'
    }).otherwise({
        redirectTo : '/aaa'
    });
}]);

m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
    $scope.name = 'xiecg-Aaa';
    $scope.$location = $location;
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'xiecg-Bbb';
}]);
m1.controller('Ccc',['$scope',function($scope){
    $scope.name = 'xiecg-Ccc';
}]);
</script>
</body>
</html>

 

這樣在切換頁面的時候就有淡入淡出的效果。

 

再回顧前面的幾章講的百度搜索：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件3</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
    .box{transition:1s all;}
    /*顯示操作*/
    .box.ng-enter{opacity:0;}
    .box.ng-enter-active{opacity:1;}
    /*隱藏操作*/
    .box.ng-leave{display:none;}
    .box.ng-enter-stagger{animation-delay:0.1s;}
</style>
</head>
<body>

<div ng-controller="Aaa">
    <input type="text" ng-model="name" ng-keyup="change(name)">
    <input type="button" ng-click="change(name)" value="搜索">
    <ul>
        <li class="box" ng-repeat="d in data">{{d}}</li>
    </ul>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngAnimate']);
m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
    
    var timer = null;
    $scope.data = [];
    $scope.change = function(name){
        $timeout.cancel(timer);
        timer = $timeout(function(){
            $http({
                method : 'JSONP',
                url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',
            }).success(function(data,state,headers,config){
                console.log(data);
                $scope.data = data.s;
            }).error(function(data){
                console.log(data);
            });
        },500);
    };

}]);

</script>
</body>
</html>

 

通過跨域我們得到百度返回過來的數據，依次過渡顯示到頁面上。

 

下麵來看JS動畫的例子：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
    .box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>

<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div class="box" ng-if="bBtn"></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngAnimate']);

//ng-if
m1.animation('.box',function(){
    return {
        //hide（刪除）
        leave : function(element,done){
            //console.log(element,done); //元素節點&刪除節點的回調函數
            $(element).animate({
                width : 0,
                height : 0
            },1000,done);
        },
        //show（填充）
        enter : function(element,done){
            //ng-if會動態創建元素，元素預設就有200的高寬。。。
            $(element).css({
                width : 0,
                height : 0
            }).animate({
                width : 200,
                height : 200
            },1000,done);
        }
    };
});

m1.controller('Aaa',['$scope',function($scope){
    $scope.bBtn = true;
}]);

</script>
</body>
</html>

 

JS動畫我們使用JQ的動畫庫來完成，註意我們在視圖上使用的是ng-if，表示添加和刪除DOM節點，所以我們在控制器return leave&enter。

JS動畫有了ng-if，自然就是ng-show。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script>
<style type="text/css">
    .box{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>

<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div class="box" ng-show="bBtn"></div>
</div>

<script type="text/javascript">

var m1 = angular.module('myApp',['ngAnimate']);

//ng-show
m1.animation('.box',function(){
    return {
        //hide（隱藏）
        addClass : function(element,sClass,done){
            //console.log(element,sClass,done); //元素節點&樣式名&刪除節點的回調函數
            $(element).animate({
                width : 0,
                height : 0
            },1000,done);
        },
        //show（顯示）
        removeClass : function(element,sClass,done){
            $(element).animate({
                width : 200,
                height : 200
            },1000,done);    
        }
    };
});

m1.controller('Aaa',['$scope',function($scope){
    $scope.bBtn = true;
}]);

</script>
</body>
</html>

 

在控制器return addClass&removeClass，表示隱藏和顯示。

 

 

 

學習筆記，如有不足，請指正！轉載請保留原文鏈接，謝謝。

最後，微博求粉，謝謝。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 滾動條自動滾到底
    設置頁面載入時滾動條自動滾到底的方法：jQuery：$(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h);});JavaScript：window.onload = func.....
  • 實用技巧：如何用 CSS 做到完全垂直居中
    本文將教你一個很有用的技巧——如何使用 CSS 做到完全的垂直居中。我們都知道margin:0 auto;的樣式能讓元素水平居中，而margin: auto;卻不能做到垂直居中……直到現在。但是，請註意！想讓元素絕對居中，只需要聲明元素高度，並且附加以下樣式，就可以做到：12345.Absolute...
  • 巧妙使用 CSS3 的褪色和動畫效果製作消息提醒框
    現代Web設計技術允許開發者快速實現大多數瀏覽器支持的動畫。我想警告消息是很常見的，因為預設的JavaScript警告框的樣式往往（與你自己設計的漂亮樣式）很不協調很囧。這使開發者步入找出哪種解決方案能更好地實現更友好的用戶界面的道路。 在這個教程中我想解釋一下我們如何能把幾個將要出現在網頁上方.....
  • 開發者必知的幾款App快速開發工具
    “我有一個好創意，就差一個CTO……” ,這是今年炒的比較火的一句話。“原生APP開發難度大，周期長，成本高，還沒上線市場已經被占領了。這個有沒有解決方案？”“APP版本迭代更新，都是企業的一道難關，沒有一個一勞永逸的解決方式嗎？”“一個Web開發者如何能快速適應移動互聯網時代，用HTML5開發出一...
  • 【JS複習筆記】01 基本語法
    數字：JS只有一種數字類型，相當於double。（不知道為什麼，我每次打double輸入法都會出現逗比了三個字）NaN是一個數值，可以用isNaN(number)檢測NaNInfinity表示所有大於一個非常大的數值的值JS有一個對象Math，它包含一套作用於數字的方法。字元串：Js中所有字元都是U...
  • JavaScript 總結幾個提高性能知識點
    前段時間花時間看了大半的《High Performance JavaScript》這本書啊，然後就開始忙項目了，慶幸最忙的一周已經熬過去了。由於空不出時間，這個月寫的學習筆記也不多，忙完最苦X的一周，這兩天晚上也算是挑燈夜讀了...終於是在殘血之際將這本書shut down了...既然讀完了，總歸是...
  • JS中this的指向問題總結
    JS中this的指向問題總結函數中的this指向和當前函數在哪定義的或者在哪執行的都沒有任何的關係分析this指向的規律如下:[非嚴格模式]1、自執行函數中的this永遠是window [案例1] var obj={ fn:(function(i){ //this->window ...
  • PC和移動端瀏覽器同步測試工具Browsersync使用介紹
    在移動端網頁開發中，總是因為不方便調試，導致各種問題不容易被髮現。但是現在有了Browsersync，一切都解決了。不熟悉的同學可以看看Browsersync的官方網站Browsersync中文網。五分鐘快速入門1.使用Browsersync前需要安裝node.js。詳細的安裝過程可參見window...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類