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