// 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); };