mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="myApp">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<title></title>
|
|
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<link rel="stylesheet" href="../../../../dist/css/ionic.css" />
|
|
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
|
<style>
|
|
#v1 {
|
|
background-color: blue;
|
|
}
|
|
#v2 {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div ng-controller="MyCtrl">
|
|
<ion-view id="v1">
|
|
<h2>Page 1</h2>
|
|
</ion-view>
|
|
<ion-view id="v2">
|
|
<h2>Page 2</h2>
|
|
</ion-view>
|
|
</div>
|
|
|
|
<script>
|
|
angular.module('myApp', ['ionic'])
|
|
.config(['$ionicAnimationProvider', function($ionicAnimationProvider) {
|
|
//$ionicAnimationProvider.setSlowAnimations(true);
|
|
}])
|
|
.controller('MyCtrl', function($scope, $ionicAnimation, $ionicGesture) {
|
|
var v1 = angular.element(document.getElementById('v1'));
|
|
var v2 = angular.element(document.getElementById('v2'));
|
|
|
|
var dragAnim = $ionicAnimation({
|
|
curve: 'ease-in-out',
|
|
duration: 1,
|
|
step: function(v) {
|
|
console.log(v);
|
|
v2[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
|
|
}
|
|
});
|
|
$ionicGesture.on('drag', function(e) {
|
|
var x = e.gesture.touches[0].pageX;
|
|
dragAnim.setPercent(Math.max(0, Math.min(x, 400) / 400));
|
|
}, v2);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|