OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * Adds convenience functions to control native Web Animations. The | |
7 * implementation details may change as Chrome support evolves. | |
8 * @polymerBehavior | |
9 */ | |
10 var TransitionBehavior = { | |
11 ready: function() { | |
12 /** | |
13 * @type {!Object<!Animation>} | |
14 * Map of running animations by animation name. Animation names are | |
15 * arbitrary but used to prevent multiple animations of the same type (e.g., | |
16 * expand/collapse section) from running simultaneously. | |
17 */ | |
18 this.animations = {}; | |
19 | |
20 /** | |
21 * @private {!Object<!Promise>} | |
22 * Map of Promises for each running animation. Key names and existence | |
23 * should correspond with |animations|. | |
24 */ | |
25 this.promises_ = {}; | |
26 }, | |
27 | |
28 /** | |
29 * Calls el.animate(keyframes, opt_options). Returns a Promise which is | |
30 * resolved when the transition ends, or rejected when the transition is | |
31 * canceled. If an animation with the same name is in progress, that | |
32 * animation is finished immediately before creating the new animation. | |
33 * @param {string} name Name of the animation, used to finish this animation | |
34 * when playing the same type of animation again. | |
35 * @param {!HTMLElement} el The element to animate. | |
36 * @param {!Array|!Object} keyframes Keyframes, as in Element.animate. | |
37 * @param {number|!KeyframeEffectOptions=} opt_options Options, as in | |
38 * Element.animate. | |
39 * @return {!Promise} A promise which is resolved when the animation finishes | |
40 * or rejected if the animation is canceled. | |
41 */ | |
42 animateElement: function(name, el, keyframes, opt_options) { | |
43 if (this.animations[name]) | |
44 this.animations[name].finish(); | |
45 | |
46 var animation = el.animate(keyframes, opt_options); | |
47 this.animations[name] = animation; | |
48 | |
49 this.promises_[name] = new Promise(function(resolve, reject) { | |
50 animation.addEventListener('finish', function() { | |
51 this.animations[name] = undefined; | |
52 resolve(); | |
53 }.bind(this)); | |
54 | |
55 animation.addEventListener('cancel', function() { | |
56 this.animations[name] = undefined; | |
57 reject(); | |
Dan Beam
2016/07/07 18:27:54
we probably shouldn't be rejecting for this. i th
Dan Beam
2016/07/12 01:36:48
ping
michaelpg
2016/07/20 22:10:57
?? this whole file was deleted. you had a similar
| |
58 }.bind(this)); | |
59 }.bind(this)); | |
60 return this.promises_[name]; | |
61 }, | |
62 | |
63 /** | |
64 * Finishes the ongoing named animation, waits for the animation's Promise | |
65 * to be resolved, then calls the callback. | |
66 * @param {string} name Name of the animation passed to animateElement. | |
67 * @param {function()=} opt_callback Called once the animation finishes. | |
68 */ | |
69 finishAnimation: function(name, opt_callback) { | |
70 if (opt_callback) | |
71 this.promises_[name].then(opt_callback); | |
72 this.animations[name].finish(); | |
73 }, | |
74 | |
75 /** | |
76 * Cancels the ongoing named animation, waits for the animation's Promise | |
77 * to be rejected, then calls the callback. | |
78 * @param {string} name Name of the animation passed to animateElement. | |
79 * @param {function()=} opt_callback Called once the animation cancels. | |
80 */ | |
81 cancelAnimation: function(name, opt_callback) { | |
82 if (opt_callback) | |
83 this.promises_[name].catch(opt_callback); | |
84 this.animations[name].cancel(); | |
85 }, | |
86 }; | |
OLD | NEW |