基于Angular.js实现的触摸滑动动画实例代码
更新时间：2017年02月19日 16:08:38 作者：helloxiaopanpan
这篇文章主要介绍了基于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实现的触摸滑动动画实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
ngrx是一套利用RxJS的类库，下面这篇文章主要给大家介绍了关于Angular X中使用ngrx的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要给大家介绍了Angular2中组件与指令的一个小实践，利用组件和指令实现一个图片轮播组件的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考学习，下面来一起看看吧。2017-03-03
AngularJS使用ng-app自动加载bootstrap框架问题分析
这篇文章主要介绍了AngularJS使用ng-app自动加载bootstrap框架问题,分析了前面文章中所述的ng-app自动加载bootstrap出现的错误原因与相应的解决方法,需要的朋友可以参考下2017-01-01
Angular.js与Bootstrap相结合实现表格分页代码
最近一直在学习angularjs相关知识，在学习过程中写了一个小demo，下面把代码思路分享给大家，感兴趣的朋友一起学习2016-04-04
众所周知AngularJS的双向绑定在表单应用中强大又方便，但是偶尔会遇到需要解除对象变量的双向绑定。Angular提供的angular.copy的方法可以实现解除双向绑定。所以这篇文章就来给大家详细的介绍下angular.copy，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本文主要讲解AngularJS表格的知识内容，这里整理了基础资料，并附代码和示例效果图，有兴趣的小伙伴可以参考下2016-08-08
这篇文章主要介绍了浅谈Angular 的变化检测的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于如何测试angular组件间传值的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angular组件具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-05-05
这篇文章主要介绍了angular4响应式表单与校验实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论