• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.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.
17the delay defaults to 50ms.
18
19Configuration:
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    /**
42     * @param {{
43     *   animation: string,
44     *   nodes: !Array<!Element>,
45     *   nodeDelay: (number|undefined),
46     *   timing: (Object|undefined)
47     *  }} config
48     */
49    configure: function(config) {
50      this._animations = [];
51      var nodes = config.nodes;
52      var effects = [];
53      var nodeDelay = config.nodeDelay || 50;
54
55      config.timing = config.timing || {};
56      config.timing.delay = config.timing.delay || 0;
57
58      var oldDelay = config.timing.delay;
59      var abortedConfigure;
60      for (var node, index = 0; node = nodes[index]; index++) {
61        config.timing.delay += nodeDelay;
62        config.node = node;
63
64        var animation = document.createElement(config.animation);
65        if (animation.isNeonAnimation) {
66          var effect = animation.configure(config);
67
68          this._animations.push(animation);
69          effects.push(effect);
70        } else {
71          console.warn(this.is + ':', config.animation, 'not found!');
72          abortedConfigure = true;
73          break;
74        }
75      }
76      config.timing.delay = oldDelay;
77      config.node = null;
78      // if a bad animation was configured, abort config.
79      if (abortedConfigure) {
80        return;
81      }
82
83      this._effect = new GroupEffect(effects);
84      return this._effect;
85    },
86
87    complete: function() {
88      for (var animation, index = 0; animation = this._animations[index]; index++) {
89        animation.complete(animation.config);
90      }
91    }
92
93  });
94
95</script>
96