基于Angular.js如何实现触摸滑动动画-创新互联

小编给大家分享一下基于Angular.js如何实现触摸滑动动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的镇雄网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

先上图：

基于Angular.js如何实现触摸滑动动画

这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right，向左或向右的触摸事件。结合css3的transition实现的动画。ng-class为切换写好的动画的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如何实现触摸滑动动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享标题：基于Angular.js如何实现触摸滑动动画-创新互联
URL链接：https://www.cdcxhl.com/article18/ddjsgp.html

成都网站建设公司_创新互联，为您提供商城网站、用户体验、电子商务、静态网站、App设计、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容