third_party/polymer/v1_0/components/neon-animation/animations/cascaded-animation.html

   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     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 found!');
  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>