1
// Copyright 2005 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 Predefined DHTML animations such as slide, resize and fade.
17
 *
18
 * @see ../demos/effects.html
19
 */
20

21
goog.provide('goog.fx.dom');
22
goog.provide('goog.fx.dom.BgColorTransform');
23
goog.provide('goog.fx.dom.ColorTransform');
24
goog.provide('goog.fx.dom.Fade');
25
goog.provide('goog.fx.dom.FadeIn');
26
goog.provide('goog.fx.dom.FadeInAndShow');
27
goog.provide('goog.fx.dom.FadeOut');
28
goog.provide('goog.fx.dom.FadeOutAndHide');
29
goog.provide('goog.fx.dom.PredefinedEffect');
30
goog.provide('goog.fx.dom.Resize');
31
goog.provide('goog.fx.dom.ResizeHeight');
32
goog.provide('goog.fx.dom.ResizeWidth');
33
goog.provide('goog.fx.dom.Scroll');
34
goog.provide('goog.fx.dom.Slide');
35
goog.provide('goog.fx.dom.SlideFrom');
36
goog.provide('goog.fx.dom.Swipe');
37

38
goog.require('goog.color');
39
goog.require('goog.events');
40
goog.require('goog.fx.Animation');
41
goog.require('goog.fx.Transition');
42
goog.require('goog.style');
43
goog.require('goog.style.bidi');
44

45
goog.forwardDeclare('goog.events.EventHandler');
46

47

48

49
/**
50
 * Abstract class that provides reusable functionality for predefined animations
51
 * that manipulate a single DOM element
52
 *
53
 * @param {Element} element Dom Node to be used in the animation.
54
 * @param {Array<number>} start Array for start coordinates.
55
 * @param {Array<number>} end Array for end coordinates.
56
 * @param {number} time Length of animation in milliseconds.
57
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
58
 * @extends {goog.fx.Animation}
59
 * @constructor
60
 * @struct
61
 */
62
goog.fx.dom.PredefinedEffect = function(element, start, end, time, opt_acc) {
63
  goog.fx.Animation.call(this, start, end, time, opt_acc);
64

65
  /**
66
   * DOM Node that will be used in the animation
67
   * @type {Element}
68
   */
69
  this.element = element;
70

71
  /**
72
   * Whether the element is rendered right-to-left. We cache this here for
73
   * efficiency.
74
   * @private {boolean|undefined}
75
   */
76
  this.rightToLeft_;
77
};
78
goog.inherits(goog.fx.dom.PredefinedEffect, goog.fx.Animation);
79

80

81
/**
82
 * Called to update the style of the element.
83
 * @protected
84
 */
85
goog.fx.dom.PredefinedEffect.prototype.updateStyle = goog.nullFunction;
86

87

88
/**
89
 * Whether the DOM element being manipulated is rendered right-to-left.
90
 * @return {boolean} True if the DOM element is rendered right-to-left, false
91
 *     otherwise.
92
 */
93
goog.fx.dom.PredefinedEffect.prototype.isRightToLeft = function() {
94
  if (!goog.isDef(this.rightToLeft_)) {
95
    this.rightToLeft_ = goog.style.isRightToLeft(this.element);
96
  }
97
  return this.rightToLeft_;
98
};
99

100

101
/** @override */
102
goog.fx.dom.PredefinedEffect.prototype.onAnimate = function() {
103
  this.updateStyle();
104
  goog.fx.dom.PredefinedEffect.superClass_.onAnimate.call(this);
105
};
106

107

108
/** @override */
109
goog.fx.dom.PredefinedEffect.prototype.onEnd = function() {
110
  this.updateStyle();
111
  goog.fx.dom.PredefinedEffect.superClass_.onEnd.call(this);
112
};
113

114

115
/** @override */
116
goog.fx.dom.PredefinedEffect.prototype.onBegin = function() {
117
  this.updateStyle();
118
  goog.fx.dom.PredefinedEffect.superClass_.onBegin.call(this);
119
};
120

121

122

123
/**
124
 * Creates an animation object that will slide an element from A to B.  (This
125
 * in effect automatically sets up the onanimate event for an Animation object)
126
 *
127
 * Start and End should be 2 dimensional arrays
128
 *
129
 * @param {Element} element Dom Node to be used in the animation.
130
 * @param {Array<number>} start 2D array for start coordinates (X, Y).
131
 * @param {Array<number>} end 2D array for end coordinates (X, Y).
132
 * @param {number} time Length of animation in milliseconds.
133
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
134
 * @extends {goog.fx.dom.PredefinedEffect}
135
 * @constructor
136
 * @struct
137
 */
138
goog.fx.dom.Slide = function(element, start, end, time, opt_acc) {
139
  if (start.length != 2 || end.length != 2) {
140
    throw Error('Start and end points must be 2D');
141
  }
142
  goog.fx.dom.PredefinedEffect.apply(this, arguments);
143
};
144
goog.inherits(goog.fx.dom.Slide, goog.fx.dom.PredefinedEffect);
145

146

147
/** @override */
148
goog.fx.dom.Slide.prototype.updateStyle = function() {
149
  var pos = (this.isRightPositioningForRtlEnabled() && this.isRightToLeft()) ?
150
      'right' :
151
      'left';
152
  this.element.style[pos] = Math.round(this.coords[0]) + 'px';
153
  this.element.style.top = Math.round(this.coords[1]) + 'px';
154
};
155

156

157

158
/**
159
 * Slides an element from its current position.
160
 *
161
 * @param {Element} element DOM node to be used in the animation.
162
 * @param {Array<number>} end 2D array for end coordinates (X, Y).
163
 * @param {number} time Length of animation in milliseconds.
164
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
165
 * @extends {goog.fx.dom.Slide}
166
 * @constructor
167
 * @struct
168
 */
169
goog.fx.dom.SlideFrom = function(element, end, time, opt_acc) {
170
  /** @type {?Array<number>} */
171
  this.startPoint;
172

173
  var offsetLeft = this.isRightPositioningForRtlEnabled() ?
174
      goog.style.bidi.getOffsetStart(element) :
175
      /** @type {!HTMLElement} */ (element).offsetLeft;
176
  var start = [offsetLeft, /** @type {!HTMLElement} */ (element).offsetTop];
177
  goog.fx.dom.Slide.call(this, element, start, end, time, opt_acc);
178
};
179
goog.inherits(goog.fx.dom.SlideFrom, goog.fx.dom.Slide);
180

181

182
/** @override */
183
goog.fx.dom.SlideFrom.prototype.onBegin = function() {
184
  var offsetLeft = this.isRightPositioningForRtlEnabled() ?
185
      goog.style.bidi.getOffsetStart(this.element) :
186
      this.element.offsetLeft;
187
  this.startPoint = [
188
    offsetLeft,
189
    /** @type {!HTMLElement} */ (this.element).offsetTop
190
  ];
191
  goog.fx.dom.SlideFrom.superClass_.onBegin.call(this);
192
};
193

194

195

196
/**
197
 * Creates an animation object that will slide an element into its final size.
198
 * Requires that the element is absolutely positioned.
199
 *
200
 * @param {Element} element Dom Node to be used in the animation.
201
 * @param {Array<number>} start 2D array for start size (W, H).
202
 * @param {Array<number>} end 2D array for end size (W, H).
203
 * @param {number} time Length of animation in milliseconds.
204
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
205
 * @extends {goog.fx.dom.PredefinedEffect}
206
 * @constructor
207
 * @struct
208
 */
209
goog.fx.dom.Swipe = function(element, start, end, time, opt_acc) {
210
  if (start.length != 2 || end.length != 2) {
211
    throw Error('Start and end points must be 2D');
212
  }
213
  goog.fx.dom.PredefinedEffect.apply(this, arguments);
214

215
  /**
216
   * Maximum width for element.
217
   * @type {number}
218
   * @private
219
   */
220
  this.maxWidth_ = Math.max(this.endPoint[0], this.startPoint[0]);
221

222
  /**
223
   * Maximum height for element.
224
   * @type {number}
225
   * @private
226
   */
227
  this.maxHeight_ = Math.max(this.endPoint[1], this.startPoint[1]);
228
};
229
goog.inherits(goog.fx.dom.Swipe, goog.fx.dom.PredefinedEffect);
230

231

232
/**
233
 * Animation event handler that will resize an element by setting its width,
234
 * height and clipping.
235
 * @protected
236
 * @override
237
 */
238
goog.fx.dom.Swipe.prototype.updateStyle = function() {
239
  var x = this.coords[0];
240
  var y = this.coords[1];
241
  this.clip_(Math.round(x), Math.round(y), this.maxWidth_, this.maxHeight_);
242
  this.element.style.width = Math.round(x) + 'px';
243
  var marginX =
244
      (this.isRightPositioningForRtlEnabled() && this.isRightToLeft()) ?
245
      'marginRight' :
246
      'marginLeft';
247

248
  this.element.style[marginX] = Math.round(x) - this.maxWidth_ + 'px';
249
  this.element.style.marginTop = Math.round(y) - this.maxHeight_ + 'px';
250
};
251

252

253
/**
254
 * Helper function for setting element clipping.
255
 * @param {number} x Current element width.
256
 * @param {number} y Current element height.
257
 * @param {number} w Maximum element width.
258
 * @param {number} h Maximum element height.
259
 * @private
260
 */
261
goog.fx.dom.Swipe.prototype.clip_ = function(x, y, w, h) {
262
  this.element.style.clip =
263
      'rect(' + (h - y) + 'px ' + w + 'px ' + h + 'px ' + (w - x) + 'px)';
264
};
265

266

267

268
/**
269
 * Creates an animation object that will scroll an element from A to B.
270
 *
271
 * Start and End should be 2 dimensional arrays
272
 *
273
 * @param {Element} element Dom Node to be used in the animation.
274
 * @param {Array<number>} start 2D array for start scroll left and top.
275
 * @param {Array<number>} end 2D array for end scroll left and top.
276
 * @param {number} time Length of animation in milliseconds.
277
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
278
 * @extends {goog.fx.dom.PredefinedEffect}
279
 * @constructor
280
 * @struct
281
 */
282
goog.fx.dom.Scroll = function(element, start, end, time, opt_acc) {
283
  if (start.length != 2 || end.length != 2) {
284
    throw Error('Start and end points must be 2D');
285
  }
286
  goog.fx.dom.PredefinedEffect.apply(this, arguments);
287
};
288
goog.inherits(goog.fx.dom.Scroll, goog.fx.dom.PredefinedEffect);
289

290

291
/**
292
 * Animation event handler that will set the scroll position of an element.
293
 * @protected
294
 * @override
295
 */
296
goog.fx.dom.Scroll.prototype.updateStyle = function() {
297
  if (this.isRightPositioningForRtlEnabled()) {
298
    goog.style.bidi.setScrollOffset(this.element, Math.round(this.coords[0]));
299
  } else {
300
    this.element.scrollLeft = Math.round(this.coords[0]);
301
  }
302
  this.element.scrollTop = Math.round(this.coords[1]);
303
};
304

305

306

307
/**
308
 * Creates an animation object that will resize an element between two widths
309
 * and heights.
310
 *
311
 * Start and End should be 2 dimensional arrays
312
 *
313
 * @param {Element} element Dom Node to be used in the animation.
314
 * @param {Array<number>} start 2D array for start width and height.
315
 * @param {Array<number>} end 2D array for end width and height.
316
 * @param {number} time Length of animation in milliseconds.
317
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
318
 * @extends {goog.fx.dom.PredefinedEffect}
319
 * @constructor
320
 * @struct
321
 */
322
goog.fx.dom.Resize = function(element, start, end, time, opt_acc) {
323
  if (start.length != 2 || end.length != 2) {
324
    throw Error('Start and end points must be 2D');
325
  }
326
  goog.fx.dom.PredefinedEffect.apply(this, arguments);
327
};
328
goog.inherits(goog.fx.dom.Resize, goog.fx.dom.PredefinedEffect);
329

330

331
/**
332
 * Animation event handler that will resize an element by setting its width and
333
 * height.
334
 * @protected
335
 * @override
336
 */
337
goog.fx.dom.Resize.prototype.updateStyle = function() {
338
  this.element.style.width = Math.round(this.coords[0]) + 'px';
339
  this.element.style.height = Math.round(this.coords[1]) + 'px';
340
};
341

342

343

344
/**
345
 * Creates an animation object that will resize an element between two widths
346
 *
347
 * Start and End should be numbers
348
 *
349
 * @param {Element} element Dom Node to be used in the animation.
350
 * @param {number} start Start width.
351
 * @param {number} end End width.
352
 * @param {number} time Length of animation in milliseconds.
353
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
354
 * @extends {goog.fx.dom.PredefinedEffect}
355
 * @constructor
356
 * @struct
357
 */
358
goog.fx.dom.ResizeWidth = function(element, start, end, time, opt_acc) {
359
  goog.fx.dom.PredefinedEffect.call(
360
      this, element, [start], [end], time, opt_acc);
361
};
362
goog.inherits(goog.fx.dom.ResizeWidth, goog.fx.dom.PredefinedEffect);
363

364

365
/**
366
 * Animation event handler that will resize an element by setting its width.
367
 * @protected
368
 * @override
369
 */
370
goog.fx.dom.ResizeWidth.prototype.updateStyle = function() {
371
  this.element.style.width = Math.round(this.coords[0]) + 'px';
372
};
373

374

375

376
/**
377
 * Creates an animation object that will resize an element between two heights
378
 *
379
 * Start and End should be numbers
380
 *
381
 * @param {Element} element Dom Node to be used in the animation.
382
 * @param {number} start Start height.
383
 * @param {number} end End height.
384
 * @param {number} time Length of animation in milliseconds.
385
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
386
 * @extends {goog.fx.dom.PredefinedEffect}
387
 * @constructor
388
 * @struct
389
 */
390
goog.fx.dom.ResizeHeight = function(element, start, end, time, opt_acc) {
391
  goog.fx.dom.PredefinedEffect.call(
392
      this, element, [start], [end], time, opt_acc);
393
};
394
goog.inherits(goog.fx.dom.ResizeHeight, goog.fx.dom.PredefinedEffect);
395

396

397
/**
398
 * Animation event handler that will resize an element by setting its height.
399
 * @protected
400
 * @override
401
 */
402
goog.fx.dom.ResizeHeight.prototype.updateStyle = function() {
403
  this.element.style.height = Math.round(this.coords[0]) + 'px';
404
};
405

406

407

408
/**
409
 * Creates an animation object that fades the opacity of an element between two
410
 * limits.
411
 *
412
 * Start and End should be floats between 0 and 1
413
 *
414
 * @param {Element} element Dom Node to be used in the animation.
415
 * @param {Array<number>|number} start 1D Array or Number with start opacity.
416
 * @param {Array<number>|number} end 1D Array or Number for end opacity.
417
 * @param {number} time Length of animation in milliseconds.
418
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
419
 * @extends {goog.fx.dom.PredefinedEffect}
420
 * @constructor
421
 * @struct
422
 */
423
goog.fx.dom.Fade = function(element, start, end, time, opt_acc) {
424
  if (goog.isNumber(start)) start = [start];
425
  if (goog.isNumber(end)) end = [end];
426

427
  goog.fx.dom.Fade.base(
428
      this, 'constructor', element, start, end, time, opt_acc);
429

430
  if (start.length != 1 || end.length != 1) {
431
    throw Error('Start and end points must be 1D');
432
  }
433

434
  /**
435
   * The last opacity we set, or -1 for not set.
436
   * @private {number}
437
   */
438
  this.lastOpacityUpdate_ = goog.fx.dom.Fade.OPACITY_UNSET_;
439
};
440
goog.inherits(goog.fx.dom.Fade, goog.fx.dom.PredefinedEffect);
441

442

443
/**
444
 * The quantization of opacity values to use.
445
 * @private {number}
446
 */
447
goog.fx.dom.Fade.TOLERANCE_ = 1.0 / 0x400;  // 10-bit color
448

449

450
/**
451
 * Value indicating that the opacity must be set on next update.
452
 * @private {number}
453
 */
454
goog.fx.dom.Fade.OPACITY_UNSET_ = -1;
455

456

457
/**
458
 * Animation event handler that will set the opacity of an element.
459
 * @protected
460
 * @override
461
 */
462
goog.fx.dom.Fade.prototype.updateStyle = function() {
463
  var opacity = this.coords[0];
464
  var delta = Math.abs(opacity - this.lastOpacityUpdate_);
465
  // In order to keep eager browsers from over-rendering, only update
466
  // on a potentially visible change in opacity.
467
  if (delta >= goog.fx.dom.Fade.TOLERANCE_) {
468
    goog.style.setOpacity(this.element, opacity);
469
    this.lastOpacityUpdate_ = opacity;
470
  }
471
};
472

473

474
/** @override */
475
goog.fx.dom.Fade.prototype.onBegin = function() {
476
  this.lastOpacityUpdate_ = goog.fx.dom.Fade.OPACITY_UNSET_;
477
  goog.fx.dom.Fade.base(this, 'onBegin');
478
};
479

480

481
/** @override */
482
goog.fx.dom.Fade.prototype.onEnd = function() {
483
  this.lastOpacityUpdate_ = goog.fx.dom.Fade.OPACITY_UNSET_;
484
  goog.fx.dom.Fade.base(this, 'onEnd');
485
};
486

487

488
/**
489
 * Animation event handler that will show the element.
490
 */
491
goog.fx.dom.Fade.prototype.show = function() {
492
  this.element.style.display = '';
493
};
494

495

496
/**
497
 * Animation event handler that will hide the element
498
 */
499
goog.fx.dom.Fade.prototype.hide = function() {
500
  this.element.style.display = 'none';
501
};
502

503

504

505
/**
506
 * Fades an element out from full opacity to completely transparent.
507
 *
508
 * @param {Element} element Dom Node to be used in the animation.
509
 * @param {number} time Length of animation in milliseconds.
510
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
511
 * @extends {goog.fx.dom.Fade}
512
 * @constructor
513
 * @struct
514
 */
515
goog.fx.dom.FadeOut = function(element, time, opt_acc) {
516
  goog.fx.dom.Fade.call(this, element, 1, 0, time, opt_acc);
517
};
518
goog.inherits(goog.fx.dom.FadeOut, goog.fx.dom.Fade);
519

520

521

522
/**
523
 * Fades an element in from completely transparent to fully opacity.
524
 *
525
 * @param {Element} element Dom Node to be used in the animation.
526
 * @param {number} time Length of animation in milliseconds.
527
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
528
 * @extends {goog.fx.dom.Fade}
529
 * @constructor
530
 * @struct
531
 */
532
goog.fx.dom.FadeIn = function(element, time, opt_acc) {
533
  goog.fx.dom.Fade.call(this, element, 0, 1, time, opt_acc);
534
};
535
goog.inherits(goog.fx.dom.FadeIn, goog.fx.dom.Fade);
536

537

538

539
/**
540
 * Fades an element out from full opacity to completely transparent and then
541
 * sets the display to 'none'
542
 *
543
 * @param {Element} element Dom Node to be used in the animation.
544
 * @param {number} time Length of animation in milliseconds.
545
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
546
 * @extends {goog.fx.dom.Fade}
547
 * @constructor
548
 * @struct
549
 */
550
goog.fx.dom.FadeOutAndHide = function(element, time, opt_acc) {
551
  goog.fx.dom.Fade.call(this, element, 1, 0, time, opt_acc);
552
};
553
goog.inherits(goog.fx.dom.FadeOutAndHide, goog.fx.dom.Fade);
554

555

556
/** @override */
557
goog.fx.dom.FadeOutAndHide.prototype.onBegin = function() {
558
  this.show();
559
  goog.fx.dom.FadeOutAndHide.superClass_.onBegin.call(this);
560
};
561

562

563
/** @override */
564
goog.fx.dom.FadeOutAndHide.prototype.onEnd = function() {
565
  this.hide();
566
  goog.fx.dom.FadeOutAndHide.superClass_.onEnd.call(this);
567
};
568

569

570

571
/**
572
 * Sets an element's display to be visible and then fades an element in from
573
 * completely transparent to fully opaque.
574
 *
575
 * @param {Element} element Dom Node to be used in the animation.
576
 * @param {number} time Length of animation in milliseconds.
577
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
578
 * @extends {goog.fx.dom.Fade}
579
 * @constructor
580
 * @struct
581
 */
582
goog.fx.dom.FadeInAndShow = function(element, time, opt_acc) {
583
  goog.fx.dom.Fade.call(this, element, 0, 1, time, opt_acc);
584
};
585
goog.inherits(goog.fx.dom.FadeInAndShow, goog.fx.dom.Fade);
586

587

588
/** @override */
589
goog.fx.dom.FadeInAndShow.prototype.onBegin = function() {
590
  this.show();
591
  goog.fx.dom.FadeInAndShow.superClass_.onBegin.call(this);
592
};
593

594

595

596
/**
597
 * Provides a transformation of an elements background-color.
598
 *
599
 * Start and End should be 3D arrays representing R,G,B
600
 *
601
 * @param {Element} element Dom Node to be used in the animation.
602
 * @param {Array<number>} start 3D Array for RGB of start color.
603
 * @param {Array<number>} end 3D Array for RGB of end color.
604
 * @param {number} time Length of animation in milliseconds.
605
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
606
 * @extends {goog.fx.dom.PredefinedEffect}
607
 * @constructor
608
 * @struct
609
 */
610
goog.fx.dom.BgColorTransform = function(element, start, end, time, opt_acc) {
611
  if (start.length != 3 || end.length != 3) {
612
    throw Error('Start and end points must be 3D');
613
  }
614
  goog.fx.dom.PredefinedEffect.apply(this, arguments);
615
};
616
goog.inherits(goog.fx.dom.BgColorTransform, goog.fx.dom.PredefinedEffect);
617

618

619
/**
620
 * Animation event handler that will set the background-color of an element
621
 */
622
goog.fx.dom.BgColorTransform.prototype.setColor = function() {
623
  var coordsAsInts = [];
624
  for (var i = 0; i < this.coords.length; i++) {
625
    coordsAsInts[i] = Math.round(this.coords[i]);
626
  }
627
  var color = 'rgb(' + coordsAsInts.join(',') + ')';
628
  this.element.style.backgroundColor = color;
629
};
630

631

632
/** @override */
633
goog.fx.dom.BgColorTransform.prototype.updateStyle = function() {
634
  this.setColor();
635
};
636

637

638
/**
639
 * Fade elements background color from start color to the element's current
640
 * background color.
641
 *
642
 * Start should be a 3D array representing R,G,B
643
 *
644
 * @param {Element} element Dom Node to be used in the animation.
645
 * @param {Array<number>} start 3D Array for RGB of start color.
646
 * @param {number} time Length of animation in milliseconds.
647
 * @param {goog.events.EventHandler=} opt_eventHandler Optional event handler
648
 *     to use when listening for events.
649
 */
650
goog.fx.dom.bgColorFadeIn = function(element, start, time, opt_eventHandler) {
651
  var initialBgColor = element.style.backgroundColor || '';
652
  var computedBgColor = goog.style.getBackgroundColor(element);
653
  var end;
654

655
  if (computedBgColor && computedBgColor != 'transparent' &&
656
      computedBgColor != 'rgba(0, 0, 0, 0)') {
657
    end = goog.color.hexToRgb(goog.color.parse(computedBgColor).hex);
658
  } else {
659
    end = [255, 255, 255];
660
  }
661

662
  var anim = new goog.fx.dom.BgColorTransform(element, start, end, time);
663

664
  function setBgColor() { element.style.backgroundColor = initialBgColor; }
665

666
  if (opt_eventHandler) {
667
    opt_eventHandler.listen(anim, goog.fx.Transition.EventType.END, setBgColor);
668
  } else {
669
    goog.events.listen(anim, goog.fx.Transition.EventType.END, setBgColor);
670
  }
671

672
  anim.play();
673
};
674

675

676

677
/**
678
 * Provides a transformation of an elements color.
679
 *
680
 * @param {Element} element Dom Node to be used in the animation.
681
 * @param {Array<number>} start 3D Array representing R,G,B.
682
 * @param {Array<number>} end 3D Array representing R,G,B.
683
 * @param {number} time Length of animation in milliseconds.
684
 * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1.
685
 * @constructor
686
 * @struct
687
 * @extends {goog.fx.dom.PredefinedEffect}
688
 */
689
goog.fx.dom.ColorTransform = function(element, start, end, time, opt_acc) {
690
  if (start.length != 3 || end.length != 3) {
691
    throw Error('Start and end points must be 3D');
692
  }
693
  goog.fx.dom.PredefinedEffect.apply(this, arguments);
694
};
695
goog.inherits(goog.fx.dom.ColorTransform, goog.fx.dom.PredefinedEffect);
696

697

698
/**
699
 * Animation event handler that will set the color of an element.
700
 * @protected
701
 * @override
702
 */
703
goog.fx.dom.ColorTransform.prototype.updateStyle = function() {
704
  var coordsAsInts = [];
705
  for (var i = 0; i < this.coords.length; i++) {
706
    coordsAsInts[i] = Math.round(this.coords[i]);
707
  }
708
  var color = 'rgb(' + coordsAsInts.join(',') + ')';
709
  this.element.style.color = color;
710
};
711

712