OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../../polymer/polymer.html"> | |
12 <link rel="import" href="../neon-animation-behavior.html"> | |
13 <link rel="import" href="../web-animations.html"> | |
14 | |
15 <!-- | |
16 `<cascaded-animation>` applies an animation on an array of elements with a delay
between each. | |
17 the delay defaults to 50ms. | |
18 | |
19 Configuration: | |
20 ``` | |
21 { | |
22 name: 'cascaded-animation', | |
23 animation: <animation-name>, | |
24 nodes: <array-of-nodes>, | |
25 nodedelay: <node-delay-in-ms>, | |
26 timing: <animation-timing> | |
27 } | |
28 ``` | |
29 --> | |
30 | |
31 <script> | |
32 | |
33 Polymer({ | |
34 | |
35 is: 'cascaded-animation', | |
36 | |
37 behaviors: [ | |
38 Polymer.NeonAnimationBehavior | |
39 ], | |
40 | |
41 properties: { | |
42 | |
43 /** @type {!Polymer.IronMeta} */ | |
44 _animationMeta: { | |
45 type: Object, | |
46 value: function() { | |
47 return new Polymer.IronMeta({type: 'animation'}); | |
48 } | |
49 } | |
50 | |
51 }, | |
52 | |
53 /** | |
54 * @param {{ | |
55 * animation: string, | |
56 * nodes: !Array<!Element>, | |
57 * nodeDelay: (number|undefined), | |
58 * timing: (Object|undefined) | |
59 * }} config | |
60 */ | |
61 configure: function(config) { | |
62 var animationConstructor = /** @type {Function} */ ( | |
63 this._animationMeta.byKey(config.animation)); | |
64 if (!animationConstructor) { | |
65 console.warn(this.is + ':', 'constructor for', config.animation, 'not fo
und!'); | |
66 return; | |
67 } | |
68 | |
69 this._animations = []; | |
70 var nodes = config.nodes; | |
71 var effects = []; | |
72 var nodeDelay = config.nodeDelay || 50; | |
73 | |
74 config.timing = config.timing || {}; | |
75 config.timing.delay = config.timing.delay || 0; | |
76 | |
77 var oldDelay = config.timing.delay; | |
78 for (var node, index = 0; node = nodes[index]; index++) { | |
79 config.timing.delay += nodeDelay; | |
80 config.node = node; | |
81 | |
82 var animation = new animationConstructor(); | |
83 var effect = animation.configure(config); | |
84 | |
85 this._animations.push(animation); | |
86 effects.push(effect); | |
87 } | |
88 config.timing.delay = oldDelay; | |
89 | |
90 this._effect = new GroupEffect(effects); | |
91 return this._effect; | |
92 }, | |
93 | |
94 complete: function() { | |
95 for (var animation, index = 0; animation = this._animations[index]; index+
+) { | |
96 animation.complete(animation.config); | |
97 } | |
98 } | |
99 | |
100 }); | |
101 | |
102 </script> | |
OLD | NEW |