63 lines
2.1 KiB
JavaScript
63 lines
2.1 KiB
JavaScript
// 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}.
|
|
*
|
|
*/
|
|
|
|
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);
|
|
};
|