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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>goog.fx.dom</title>
<script src="../base.js"></script>
<script>
goog.require('goog.events');
goog.require('goog.fx');
goog.require('goog.fx.dom');
</script>
<link rel="stylesheet" href="css/demo.css">
<style>
#test1 {
position: absolute;
left: 150px;
top: 100px;
width: 20px;
height: 20px;
background-color: rgb(0,0,0);
}
button {
font: normal 10px arial;
width: 125px;
}
</style>
</head>
<body>
<h1>goog.fx.dom</h1>
<p><strong>Demonstrations of the goog.fx.dom library</strong></p>
<p>
<button id="but0" onclick="slide(0, 0);">Slide To 0x0</button><br>
<button id="but1" onclick="slide(400, 40);">Slide To 400x40</button><br>
<button id="but2" onclick="slide(300, 200);">Slide To 300x200</button><br>
<button id="but3" onclick="slide(600, 100);">Slide To 600x100</button>
</p>
<p>
<button id="but4" onclick="resize(50, 50);">Resize To 50x50</button><br>
<button id="but5" onclick="resize(250, 50);">Resize To 250x50</button><br>
<button id="but6" onclick="resize(5, 5);">Resize To 5x5</button><br>
<button id="but7" onclick="resize(250, 250);">Resize To 250x250</button><br>
<button id="but8" onclick="resize(1250, 1250);">Resize To 1250x1250</button>
</p>
<p>
<button id="but9" onclick="fadeout();">Fade Out</button><br>
<button id="but10" onclick="fadein();">Fade In</button>
</p>
<p>
<button id="but11" onclick="color(200, 0, 0);">Transform to red</button><br>
<button id="but12" onclick="color(180, 180, 180);">Transform to grey</button><br>
<button id="but13" onclick="color(0, 0, 0);">Transform to black</button><br>
<button id="but14" onclick="color(100, 100, 255);">Transform to blue</button>
</p>
<p>
<button id="but15" onclick="toggleRequestAnimationFrame();"></button>
<p>
<div id="test1"><!-- This comment is an IE6 hack to fix height:20px --></div>
<script>
var col = [0, 0, 0];
var duration = 1000;
var el = document.getElementById('test1');
/**
* Enables all buttons then disposes of the animation.
* @param {!goog.events.Event} e goog.fx.Transition.EventType.END event with
* the goog.fx.Animation object in its target.
*/
function enableButtons(e) {
for (var i = 0; i <= 15; i++) {
document.getElementById('but' + i).disabled = false;
}
e.target.dispose();
}
function disableButtons() {
for (var i = 0; i <= 15; i++) {
document.getElementById('but' + i).disabled = true;
}
}
function slide(a, b) {
var x = el.offsetLeft;
var y = el.offsetTop;
var anim = new goog.fx.dom.Slide(el, [x, y], [a, b], duration,
goog.fx.easing.easeOut);
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
disableButtons);
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
anim.play();
}
function resize(a, b) {
var w = el.offsetWidth;
var h = el.offsetHeight;
var anim = new goog.fx.dom.Resize(el, [w, h], [a, b], duration,
goog.fx.easing.easeOut);
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
disableButtons);
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
anim.play();
}
function fadeout() {
var anim = new goog.fx.dom.FadeOutAndHide(el, duration);
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
disableButtons);
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
anim.play();
}
function fadein() {
var anim = new goog.fx.dom.FadeInAndShow(el, duration);
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
disableButtons);
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
anim.play();
}
function color(r, g, b) {
var anim = new goog.fx.dom.BgColorTransform(el, col, [r, g, b], duration);
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
disableButtons);
goog.events.listen(anim, goog.fx.Transition.EventType.END, function(e) {
col = [e.x, e.y, e.z];
enableButtons();
});
anim.play();
}
function toggleRequestAnimationFrame() {
rafEnabled = !rafEnabled;
goog.fx.Animation.setAnimationWindow(rafEnabled ? window : null);
updateRafButton();
}
function updateRafButton() {
goog.dom.setTextContent(goog.dom.getElement('but15'),
rafEnabled ?
'Disable timing control API' : 'Enable timing control API');
}
goog.fx.Animation.setAnimationWindow(window);
var rafEnabled = goog.fx.Animation.animationWindow_;
updateRafButton();
</script>
</body>
</html>
|
