javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Shouldn't have been in there

Browse Source
This commit is contained in:
Max Lynch
2014-05-12 13:06:42 -05:00
parent c944fe5944
commit da00f72ca3
6 changed files with 0 additions and 5218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
test/html/animation.html
View File

@@ -1,121 +0,0 @@
<!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>
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
}
#opts {
position: absolute;
top: 200px;
left: 10px;
}
</style>
</head>
<body>
<div ng-controller="MyCtrl">
<div class="box"></div>
<div id="opts">
<label>
Duration:
<input type="number" ng-model="anim.duration">
</label>
<label>
Repeat
<input type="number" ng-model="anim.repeat">
</label>
<br>
<label>
Delay
<input type="number" ng-model="anim.delay">
</label>
<br>
<label>
Auto reverse
<input type="checkbox" ng-model="anim.autoReverse">
</label>
<br>
<label>
Reverse
<input type="checkbox" ng-model="anim.reverse">
</label>
<br>
<button ng-click="do('{{v}}')" ng-repeat="v in fns">{{v}}</button>
<p>
<button ng-click="togglePause()">Toggle Pause/Play</button>
<button ng-click="stop()">Stop</button>
<button ng-click="restart()">Restart</button>
</p>
</div>
</div>
<script>
angular.module('myApp', ['ionic'])
.config(['$ionicAnimationProvider', function($ionicAnimationProvider) {
//$ionicAnimationProvider.setSlowAnimations(true);
}])
.controller('MyCtrl', function($scope, $ionicAnimation) {
var currentAnimation;
$scope.fns = [
'linear',
'ease',
'ease-in',
'ease-out',
'ease-in-out'
];
$scope.anim = {
duration: 500,
delay: 0,
repeat: -1,
reverse: false,
autoReverse: false
}
var el = angular.element(document.querySelector('.box'));
$scope.do = function(fn) {
currentAnimation = $ionicAnimation(angular.extend({
el: el,
name: 'fadeIn',
duration: 500,
delay: 500,
autoReverse: false,
repeat: -1,
curve: fn,
step: function(v) {
el[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + (v * 400) + 'px, 0,0)';
},
complete: function() {
console.log('Animation complete!');
}
}, $scope.anim));
currentAnimation.start();
}
$scope.togglePause = function() {
if(currentAnimation.isPaused) {
currentAnimation.play();
} else {
currentAnimation.pause();
}
};
$scope.stop = function() {
currentAnimation.stop();
};
$scope.restart = function() {
currentAnimation.restart();
};
});
</script>
</body>
</html>