AngularJS 动画和触摸服务

发布时间：2020-12-17 10:06:21 所属栏目：安全来源：网络整理

导读：学习要点动画元素触摸事件一、动画元素 $animate 服务允许我们使用动画，它不是定义任何动画本身，而是依靠 CSS3 的 animation 和 transition 使用步骤：第一步：引入angular-animate.min.js文件第二步：在应用中使用模型ngAnimate 第三步：定义动画样

学习要点

动画元素
触摸事件

一、动画元素
$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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!