学习要点
- 动画元素
- 触摸事件
一、动画元素
$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>
三、触摸事件
使用步骤：
- 引入angular-touch.min.js文件
- 使用ngTouch模块
- 使用相关指令
<!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>
