transition.html | Explore in Territory

<!DOCTYPE html>
<!--
Copyright 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.
-->
<html>
<head>
<title>Closure: CSS3 Transition Demo</title>
<script src="../../../base.js"></script>
<script src="../../../deps.js"></script>
<link rel="stylesheet" href="../../css/demo.css">
<style>
.demo-options {
  float: left;
  padding: 0 0 20px;
  width: 248px;
}
.demo-panel {
  margin: 0 0 0 264px;
  padding: 80px 0 0 80px;
  text-align: center;
}
label.options {
  padding-left: 35px;
}
#demo-animated-box {
  background-color: #000;
  color: white;
  height: 20px;
  padding: 40px 0;
  text-align: center;
  width: 100px;
}
#demo-buttons {
  padding: 8px 0 0;
  text-align: center;
}
.goog-debug-panel {
  clear: both;
}
.goog-debug-panel .logdiv {
  height: 300px;
}
</style>

<script type="text/javascript">
goog.require('goog.debug.DivConsole');
goog.require('goog.dispose');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.ActionHandler');
goog.require('goog.events.ActionHandler.EventType');
goog.require('goog.fx.Transition.EventType');
goog.require('goog.fx.css3');
goog.require('goog.log');
</script>
</head>
<body>
<div class="demo-options">
<form>
  <fieldset>
    <legend>CSS3 transition choices</legend>
    <label>
      <input type="radio" name="transition" value="FadeIn" checked>Fade In
    </label><br/>
      <label class="options">
        Duration (in s):
        <input type="text" size="3" name="FadeInDuration" value="1">
      </label><br/>
    <label>
      <input type="radio" name="transition" value="FadeOut">Fade Out
    </label><br/>
      <label class="options">
        Duration (in s):
        <input type="text" size="3" name="FadeOutDuration" value="1">
      </label><br/>
    <label>
      <input type="radio" name="transition" value="Fade">Fade
    </label><br/>
      <label class="options">
        Duration (in s):
        <input type="text" size="3" name="FadeDuration" value=".5">
      </label><br/>
      <label class="options">
        CSS3 timing:
        <input type="text" size="7" name="FadeTimingFn" value="ease-in">
      </label><br/>
      <label class="options">
        Starting opacity:
        <input type="text" size="3" name="FadeStartingOpacity" value=".2">
      </label><br/>
      <label class="options">
        Ending opacity:
        <input type="text" size="3" name="FadeEndingOpacity" value=".8">
      </label>
    <div id="demo-buttons">
      <input type="button" id="animate-btn" value="Animate!"></input>
      <input type="button" id="reset-btn" value="Reset"></input>
    </div>
  </fieldset>
</form>
</div>
<div class="demo-panel">
  <div id="demo-animated-box">Hi there!</div>
</div>

<!-- Logging panel -->
<fieldset class="goog-debug-panel">
  <legend>Event log for the transition object</legend>
  <div id="log"></div>
</fieldset>

<script>
// Set up debug console.
var logger = goog.log.getLogger('Demo');
new goog.debug.DivConsole(goog.dom.getElement('log')).
    setCapturing(true);
var eventTypes = goog.object.getValues(goog.fx.Transition.EventType);

var isPlaying = false;
var transition;
var animatedBox = goog.dom.getElement('demo-animated-box');
var animateButton = goog.dom.getElement('animate-btn');
var resetButton = goog.dom.getElement('reset-btn');

function fadeIn() {
  var duration = parseFloat(getValue_('FadeInDuration'));

  transition = goog.fx.css3.fadeIn(animatedBox, duration);
  installListener_(transition);
  transition.play();
}

function fadeOut() {
  var duration = parseFloat(getValue_('FadeOutDuration'));

  transition = goog.fx.css3.fadeOut(animatedBox, duration);
  installListener_(transition);
  transition.play();
}

function fade() {
  var duration = parseFloat(getValue_('FadeDuration'));
  var timingFn = getValue_('FadeTimingFn');
  var startOpacity = parseFloat(getValue_('FadeStartingOpacity'));
  var endOpacity = parseFloat(getValue_('FadeEndingOpacity'));

  transition = goog.fx.css3.fade(
      animatedBox, duration, timingFn, startOpacity, endOpacity);
  installListener_(transition);
  transition.play();
}

function animate() {
  stopOrReset();
  goog.dispose(transition);
  goog.Timer.callOnce(animate_);
}

function animate_() {
  isPlaying = true;
  resetButton.value = 'Stop';

  var transitionType = getValue_('transition');
  switch (transitionType) {
    case 'FadeIn': fadeIn(); break;
    case 'FadeOut': fadeOut(); break;
    case 'Fade': fade(); break;
  }

  goog.events.listen(
      transition, goog.fx.Transition.EventType.END, function() {
        isPlaying = false;
        resetButton.value = 'Reset';
      });
}

function stopOrReset() {
  if (!transition) return;

  if (isPlaying) {
    isPlaying = false;
    resetButton.value = 'Reset';
    transition.stop();
  } else {
    transition.dispose();
    // Resets all the possible overriding (for now just opacity due to fade).
    animatedBox.style.opacity = '';
  }
}

function getValue_(name) {
  var elements = document.forms[0].elements[name];
  if (goog.isArrayLike(elements)) {
    for (var i = 0; i < elements.length; ++i) {
      if (elements[i].checked) return elements[i].value;
    }
  }

  return elements.value;
}

function installListener_(transition) {
  goog.events.listen(transition, eventTypes, function(e) {
    goog.log.info(logger, 'Fired event: ' + e.type);
  });
}

goog.events.listen(
    new goog.events.ActionHandler(animateButton),
    goog.events.ActionHandler.EventType.ACTION, animate);
goog.events.listen(
    new goog.events.ActionHandler(resetButton),
    goog.events.ActionHandler.EventType.ACTION, stopOrReset);

</script>
</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/fx/css3/transition.html
