cocorobolx/block/closure/goog/fx/css3/fx.js

// Copyright 2011 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview A collection of CSS3 targeted animation, based on
 * {@code goog.fx.css3.Transition}.
 *
 * @author chrishenry@google.com (Chris Henry)
 */

goog.provide('goog.fx.css3');

goog.require('goog.fx.css3.Transition');


/**
 * Creates a transition to fade the element.
 * @param {Element} element The element to fade.
 * @param {number} duration Duration in seconds.
 * @param {string} timing The CSS3 timing function.
 * @param {number} startOpacity Starting opacity.
 * @param {number} endOpacity Ending opacity.
 * @return {!goog.fx.css3.Transition} The transition object.
 */
goog.fx.css3.fade = function(
    element, duration, timing, startOpacity, endOpacity) {
  return new goog.fx.css3.Transition(
      element, duration, {'opacity': startOpacity}, {'opacity': endOpacity},
      {property: 'opacity', duration: duration, timing: timing, delay: 0});
};


/**
 * Creates a transition to fade in the element.
 * @param {Element} element The element to fade in.
 * @param {number} duration Duration in seconds.
 * @return {!goog.fx.css3.Transition} The transition object.
 */
goog.fx.css3.fadeIn = function(element, duration) {
  return goog.fx.css3.fade(element, duration, 'ease-out', 0, 1);
};


/**
 * Creates a transition to fade out the element.
 * @param {Element} element The element to fade out.
 * @param {number} duration Duration in seconds.
 * @return {!goog.fx.css3.Transition} The transition object.
 */
goog.fx.css3.fadeOut = function(element, duration) {
  return goog.fx.css3.fade(element, duration, 'ease-in', 1, 0);
};