利用CSS3在Angular中實(shí)現(xiàn)動(dòng)畫
廢話不多說了,直接給大家貼實(shí)例代碼。
直接看例子:
<!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節(jié)點(diǎn)的時(shí)候,angular會(huì)添加指定的class,方便我們完成動(dòng)畫。
.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active
現(xiàn)在再看看顯示和隱藏。
<!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
這個(gè)例子我們使用的是ng-show,屬于顯示和隱藏。上一個(gè)例子是ng-if,屬于添加和刪除。
回顧上一節(jié)我們提到的路由,我們可以結(jié)合起來操作。
<!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')">首頁(yè)</a> <a href="javascript:void(0);" ng-click="$location.path('bbb')">內(nèi)容</a> <a href="javascript:void(0);" ng-click="$location.path('ccc')">標(biāo)題</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>
這樣在切換頁(yè)面的時(shí)候就有淡入淡出的效果。
再回顧前面的幾章講的百度搜索:
<!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">{vvxyksv9kd}</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>
通過跨域我們得到百度返回過來的數(shù)據(jù),依次過渡顯示到頁(yè)面上。
下面來看JS動(dòng)畫的例子:
<!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); //元素節(jié)點(diǎn)&刪除節(jié)點(diǎn)的回調(diào)函數(shù) $(element).animate({ width : 0, height : 0 },1000,done); }, //show(填充) enter : function(element,done){ //ng-if會(huì)動(dòng)態(tài)創(chuàng)建元素,元素默認(rèn)就有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動(dòng)畫我們使用JQ的動(dòng)畫庫(kù)來完成,注意我們?cè)谝晥D上使用的是ng-if,表示添加和刪除DOM節(jié)點(diǎn),所以我們?cè)诳刂破鱮eturn leave&enter。
JS動(dòng)畫有了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); //元素節(jié)點(diǎn)&樣式名&刪除節(jié)點(diǎn)的回調(diào)函數(shù) $(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,表示隱藏和顯示。
- Angular4.0動(dòng)畫操作實(shí)例詳解
- Angular4如何自定義首屏的加載動(dòng)畫詳解
- Angular2搜索和重置按鈕過場(chǎng)動(dòng)畫
- 基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫實(shí)例代碼
- 給angular加上動(dòng)畫效遇到的問題總結(jié)
- AngularJS中實(shí)現(xiàn)顯示或隱藏動(dòng)畫效果的方式總結(jié)
- 使用ngView配合AngularJS應(yīng)用實(shí)現(xiàn)動(dòng)畫效果的方法
- 在AngularJS應(yīng)用中實(shí)現(xiàn)一些動(dòng)畫效果的代碼
- 詳解Angular路由動(dòng)畫及高階動(dòng)畫函數(shù)
相關(guān)文章
Angular實(shí)現(xiàn)一個(gè)簡(jiǎn)單的多選復(fù)選框的彈出框指令實(shí)例
下面小編就為大家?guī)硪黄狝ngular實(shí)現(xiàn)一個(gè)簡(jiǎn)單的多選復(fù)選框的彈出框指令實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例(debounce)
這篇文章主要介紹了angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例(debounce),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼
這篇文章主要為大家介紹了Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03使用JavaScript的AngularJS庫(kù)編寫hello world的方法
這篇文章主要介紹了使用JavaScript的AngularJS庫(kù)編寫hello world的方法,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下2015-06-06Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器
我們?cè)陂_發(fā)的時(shí)候都會(huì)用到表單,那么驗(yàn)證器就是必不可少的東西,這篇文章主要給大家介紹了關(guān)于在Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器的相關(guān)資料,需要的朋友可以參考下2022-03-03解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架,已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法,需要的的朋友參考下吧2017-07-07