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