| <!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> |
