快捷導(dǎo)航

基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫實(shí)例代碼

更新時(shí)間：2017年02月19日 16:08:38 作者：helloxiaopanpan

這篇文章主要介紹了基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

先上圖：

這個(gè)主要用到是angular-touch.js中封裝好的ng-swipe-left,ng-swipe-right，向左或向右的觸摸事件。結(jié)合css3的transition實(shí)現(xiàn)的動(dòng)畫。ng-class為切換寫好的動(dòng)畫的className.

<!DOCTYPE HTML>
<html ng-app="myapp">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
 <title>Angular2</title>
 <script type="text/javascript" charset="utf-8" src="angular.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="angular-touch.min.js"></script>
 <style type="text/css">
 *{margin:0px;padding:0px;}
 .box{position:relative;left:0px;margin:10px 0px;width:100%;height:100px;background:red;transition:all .5s;;}
 .swipeleft{left:-100%;}
 </style>
 <script type="text/javascript" charset="utf-8">
 angular.module("myapp",["ngTouch"]).controller("Controller",[function(){
 var self = this;
 self.swipeLeft = function(){
 return (self.className = "swipeleft");
 }
 }]);
 </script>
 </head>
 <body>
 <ul>
 <li ng-controller="Controller as con" class="box box1" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 <li ng-controller="Controller as con" class="box box2" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 <li ng-controller="Controller as con" class="box box3" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 <li ng-controller="Controller as con" class="box box4" ng-swipe-left="con.swipeLeft()" ng-class="con.className"></li>
 </ul>
 </body>
</html>

以上所述是小編給大家介紹的基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法
今天小編就為大家分享一篇angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
詳解Angular路由動(dòng)畫及高階動(dòng)畫函數(shù)
本文主要講解了Angular的路由動(dòng)畫和高階動(dòng)畫函數(shù)，對(duì)此感興趣的同學(xué)，可以把代碼親自實(shí)驗(yàn)一下，理解其原理。
2021-05-05
AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域
這篇文章主要介紹了AngularJs(五）從Controller控制器談?wù)?scope作用域的相關(guān)資料,需要的朋友可以參考下
2016-06-06
Angular.js中定時(shí)器循環(huán)的3種方法總結(jié)
這篇文章主要給大家總結(jié)了angular.js中定時(shí)器循環(huán)的3種方法，分別是利用$interlval實(shí)現(xiàn)、$timeout的遞歸調(diào)用來實(shí)現(xiàn)以及$timeout借助arguments.callee來實(shí)現(xiàn)，每種方法都給出了詳細(xì)的示例艾瑪供大家學(xué)習(xí)參考，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-04-04
angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼
本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
詳解Angular.js的$q.defer()服務(wù)異步處理
相信大家都知道jquery和angular都有defer服務(wù)，這篇文章暫以angular為例談?wù)剛€(gè)人的理解，在文章的最后并附上jquery的阮一峰總結(jié)的defer。有需要的朋友們也可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2016-11-11
angular使用TweenMax動(dòng)畫庫的問題和解決方法
這篇文章主要給大家介紹了關(guān)于angular使用TweenMax的相關(guān)問題和解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
angular中不同的組件間傳值與通信的方法
本篇文章主要介紹了angular中不同的組件間傳值與通信的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
深入理解AngularJS中的ng-bind-html指令
ng-bind-html和ng-bind的區(qū)別就是,ng-bind把值作為字符串,和元素的內(nèi)容進(jìn)行綁定,但是ng-bind-html把值作為html,和元素的html進(jìn)行綁定.相當(dāng)于jq里面的.text()和.html()。這篇文章主要給大家深入的介紹了AngularJS中ng-bind-html指令的相關(guān)資料,需要的朋友可以參考下。
2017-03-03
AngularJS過濾器詳解及示例代碼
本文主要介紹AngularJS過濾器，這里整理了詳細(xì)的資料和提供了示例代碼及實(shí)例效果圖，有興趣的小伙伴可以參考下
2016-08-08