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

15
/**
16
 * @fileoverview A collection of CSS3 targeted animation, based on
17
 * {@code goog.fx.css3.Transition}.
18
 *
19
 * @author [email protected] (Chris Henry)
20
 */
21

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

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

26

27
/**
28
 * Creates a transition to fade the element.
29
 * @param {Element} element The element to fade.
30
 * @param {number} duration Duration in seconds.
31
 * @param {string} timing The CSS3 timing function.
32
 * @param {number} startOpacity Starting opacity.
33
 * @param {number} endOpacity Ending opacity.
34
 * @return {!goog.fx.css3.Transition} The transition object.
35
 */
36
goog.fx.css3.fade = function(
37
    element, duration, timing, startOpacity, endOpacity) {
38
  return new goog.fx.css3.Transition(
39
      element, duration, {'opacity': startOpacity}, {'opacity': endOpacity},
40
      {property: 'opacity', duration: duration, timing: timing, delay: 0});
41
};
42

43

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

54

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

65