-
Notifications
You must be signed in to change notification settings - Fork 49
/
index.html
96 lines (83 loc) · 4.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html class="no-js" lang="en" ng-app="ExampleApp" ng-controller="MainCtrl as ctrl">
<head>
<!-- <base href="/"></base> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="google" content="notranslate" />
<title>angular-ui-router-anim-in-out</title>
<link rel="stylesheet" type="text/css" href="bower_components/Bootflat/css/site.min.css">
<link rel="stylesheet" type="text/css" href="example/styles.css">
<link rel="stylesheet" type="text/css" href="css/anim-in-out.css">
</head>
<body>
<div id="menu">
<a href="#/"><button class="btn btn-primary">Page 1</button></a>
<a href="#/page2"><button class="btn btn-primary">Page 2</button></a>
</div>
<div id="controls">
<label class="control-label">Speed (ms)</label>
<input class="form-control input-sm" type="number" ng-model="ctrl.speed">
<label class="control-label">Syncronise</label>
<label class="toggle">
<input type="checkbox" ng-model="ctrl.sync">
<span class="handle"></span>
</label>
<label class="control-label">Main View Style</label>
<select class="form-control input-sm" ng-model="ctrl.mainViewStyle">
<option value="anim-fade">Fade</option>
<option value="anim-slide-left">Slide left</option>
<option value="anim-slide-right">Slide right</option>
<option value="anim-zoom-in">Zoom in subtle</option>
<option value="anim-zoom-out">Zoom out subtle</option>
<option value="anim-zoom-in-full">Zoom in full</option>
<option value="anim-zoom-out-full">Zoom out full</option>
<option value="anim-slide-below">Slide below</option>
<option value="anim-slide-below-fade">Slide below + fade</option>
<option value="anim-swap">None</option>
</select>
<label class="control-label">Page 1 Style</label>
<select class="form-control input-sm" ng-model="ctrl.page1Style">
<option value="anim-fade">Fade</option>
<option value="anim-slide-left">Slide left</option>
<option value="anim-slide-right">Slide right</option>
<option value="anim-zoom-in">Zoom in subtle</option>
<option value="anim-zoom-out">Zoom out subtle</option>
<option value="anim-zoom-in-full">Zoom in full</option>
<option value="anim-zoom-out-full">Zoom out full</option>
<option value="anim-slide-below">Slide below</option>
<option value="anim-slide-below-fade">Slide below + fade</option>
<option value="anim-swap">None</option>
</select>
<label class="control-label">Page 2 Style</label>
<select class="form-control input-sm" ng-model="ctrl.page2Style">
<option value="anim-fade">Fade</option>
<option value="anim-slide-left">Slide left</option>
<option value="anim-slide-right">Slide right</option>
<option value="anim-zoom-in">Zoom in subtle</option>
<option value="anim-zoom-out">Zoom out subtle</option>
<option value="anim-zoom-in-full">Zoom in full</option>
<option value="anim-zoom-out-full">Zoom out full</option>
<option value="anim-slide-below">Slide below</option>
<option value="anim-slide-below-fade">Slide below + fade</option>
<option value="anim-swap">None</option>
</select>
</div>
<div id="main" ui-view="main" autoscroll="false" class="anim-in-out {{ctrl.mainViewStyle}}"
data-anim-sync="{{ctrl.sync}}"
data-anim-speed="{{ctrl.speed}}"
ng-style="{
'-webkit-transition-duration': ctrl.speed + 'ms',
'-moz-transition-duration': ctrl.speed + 'ms',
'-ms-transition-duration': ctrl.speed + 'ms',
'-o-transition-duration': ctrl.speed + 'ms',
'transition-duration': ctrl.speed + 'ms'
}"></div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="anim-in-out.js"></script>
<script type="text/javascript" src="example/app.js"></script>
<script type="text/javascript" src="example/templates.js"></script>
</body>
</html>