Home | History | Annotate | Download | only in animations 
      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.github.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/CONTRIBUTORS.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/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.
     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     /**
     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