基于angualr.js实现的触摸滑动动画

这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right，向左或向右的触摸事件。结合CSS3的transition实现的动画。ng-class为切换写好的动画的className.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>基于angualr.js实现的触摸滑动动画</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>

本文标题:基于angualr.js实现的触摸滑动动画

文章作者:xiaoqi

发布时间:2017-02-19, 15:20:24

最后更新:2017-02-19, 15:24:07

原始链接:http://m.xiaoqi888.cn/2017/02/19/基于angualr.js实现的触摸滑动动画.html/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录