Touch Swipe Animation Example Code Implemented Based on Angular.js

First, let's show the picture:

This mainly uses angular-touch.js encapsulated ng-swipe-left,ng-swipe-right, touch events moving left or right. Combined with css3animation realized by the transition. ng-class as the className for the animation to be switched.

<!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>

The code examples of touch sliding animation implemented based on Angular.js introduced by the editor to everyone are as follows, I hope they will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time!

Statement: The content of this article is from the network, the copyright belongs to the original author. The content is contributed and uploaded by Internet users. This website does not own the copyright, does not edit manually, and does not bear relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial