AngularJS 动画和触摸服务

学习要点

  • 动画元素
  • 触摸事件

一、动画元素
$animate 服务允许我们使用动画,它不是定义任何动画本身,而是依靠 CSS3 的 animation 和 transition
使用步骤:
第一步:引入angular-animate.min.js文件
第二步:在应用中使用模型ngAnimate
第三步:定义动画样式
第四步:用class属性引入

<!DOCTYPE>
<!-- use module -->
<html>
<head>
    <title>Angluar ajax</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style> div { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0; } .ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px; } </style>
</head>
<body ng-app="myApp">
    <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
    <div ng-hide="myCheck"></div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript"> var app = angular.module('myApp', ['ngAnimate']); </script>
</body>
</html>

AngularJS 动画和触摸服务_第1张图片

三、触摸事件

使用步骤:

  1. 引入angular-touch.min.js文件
  2. 使用ngTouch模块
  3. 使用相关指令
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar ajax</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body ng-controller="defaultCtrl"> <div class="panel panel-default"> <div class="panel-body"> <div class="well" ng-swipe-right="handleSwipe('left-to-right')" ng-swipe-left="handleSwipe('right-to-left')"> <h4>Swipe Here</h4> </div> <div>Swipe was : {{swipeType}}</div> </div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/angular-touch.min.js"></script> <!-- 引入指令文件 --> <script type="text/javascript"> // 使用指令 angular.module("exampleApp", ["ngTouch"]) .controller("defaultCtrl", function ($scope, $element) { $scope.swipeType = "<None>"; $scope.handleSwipe = function (direction) { $scope.swipeType = direction; } }) </script> </body> </html>

当手指从左往右和从右往左滑动时,会显示不同的提示信息

你可能感兴趣的:(动画,AngularJS,触屏,ngAnimate,ngTouch)