src/third_party/polymer/components/core-animation/core-animation-group.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="core-animation.html">
  12
  13 <!--
  14 @group Polymer Core Elements
  15
  16 `core-animation-group` combines `core-animation` or `core-animation-group` elements to
  17 create a grouped web animation. The group may be parallel (type is `par`) or sequential
  18 (type is `seq`). Parallel groups play all the children elements simultaneously, and
  19 sequential groups play the children one after another.
  20
  21 Example of an animation group to rotate and then fade an element:
  22
  23     <core-animation-group type="seq">
  24       <core-animation id="fadeout" duration="500">
  25         <core-animation-keyframe>
  26           <core-animation-prop name="transform" value="rotate(0deg)"></core-animation-prop>
  27           <core-animation-prop name="transform" value="rotate(45deg)"></core-animation-prop>
  28         </core-animation-keyframe>
  29       </core-animation>
  30       <core-animation id="fadeout" duration="500">
  31         <core-animation-keyframe>
  32           <core-animation-prop name="opacity" value="1"></core-animation-prop>
  33         </core-animation-keyframe>
  34         <core-animation-keyframe>
  35           <core-animation-prop name="opacity" value="0"></core-animation-prop>
  36         </core-animation-keyframe>
  37       </core-animation>
  38     </core-animation-group>
  39
  40 @element core-animation-group
  41 @status beta
  42 @homepage github.io
  43 -->
  44 <polymer-element name="core-animation-group" constructor="CoreAnimationGroup" extends="core-animation" attributes="type">
  45   <script>
  46     (function() {
  47
  48       var ANIMATION_GROUPS = {
  49         'par': AnimationGroup,
  50         'seq': AnimationSequence
  51       };
  52
  53       Polymer({
  54
  55         publish: {
  56           /**
  57            * If target is set, any children without a target will be assigned the group's
  58            * target when this property is set.
  59            *
  60            * @property target
  61            * @type HTMLElement|Node|Array|Array<HTMLElement|Node>
  62            */
  63
  64           /**
  65            * For a `core-animation-group`, a duration of "auto" means the duration should
  66            * be the specified duration of its children. If set to anything other than
  67            * "auto", any children without a set duration will be assigned the group's duration.
  68            *
  69            * @property duration
  70            * @type number
  71            * @default "auto"
  72            */
  73           duration: {value: 'auto', reflect: true},
  74
  75           /**
  76            * The type of the animation group. 'par' creates a parallel group and 'seq' creates
  77            * a sequential group.
  78            *
  79            * @property type
  80            * @type String
  81            * @default 'par'
  82            */
  83           type: {value: 'par', reflect: true}
  84         },
  85
  86         typeChanged: function() {
  87           this.apply();
  88         },
  89
  90         targetChanged: function() {
  91           // Only propagate target to children animations if it's defined.
  92           if (this.target) {
  93             this.doOnChildren(function(c) {
  94               c.target = this.target;
  95             }.bind(this));
  96           }
  97         },
  98
  99         durationChanged: function() {
 100           if (this.duration && this.duration !== 'auto') {
 101             this.doOnChildren(function(c) {
 102               // Propagate to children that is not a group and has no
 103               // duration specified.
 104               if (!c.type && (!c.duration || c.duration === 'auto')) {
 105                 c.duration = this.duration;
 106               }
 107             }.bind(this));
 108           }
 109         },
 110
 111         doOnChildren: function(inFn) {
 112           var children = this.children;
 113           if (!children.length) {
 114             children = this.shadowRoot ? this.shadowRoot.childNodes : [];
 115           }
 116           Array.prototype.forEach.call(children, function(c) {
 117             // TODO <template> in the way
 118             c.apply && inFn(c);
 119           }, this);
 120         },
 121
 122         makeAnimation: function() {
 123           return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
 124         },
 125
 126         hasTarget: function() {
 127           var ht = this.target !== null;
 128           if (!ht) {
 129             this.doOnChildren(function(c) {
 130               ht = ht || c.hasTarget();
 131             }.bind(this));
 132           }
 133           return ht;
 134         },
 135
 136         apply: function() {
 137           // Propagate target and duration to child animations first.
 138           this.durationChanged();
 139           this.targetChanged();
 140           this.doOnChildren(function(c) {
 141             c.apply();
 142           });
 143           return this.super();
 144         },
 145
 146         get childAnimationElements() {
 147           var list = [];
 148           this.doOnChildren(function(c) {
 149             if (c.makeAnimation) {
 150               list.push(c);
 151             }
 152           });
 153           return list;
 154         },
 155
 156         get childAnimations() {
 157           var list = [];
 158           this.doOnChildren(function(c) {
 159             if (c.animation) {
 160               list.push(c.animation);
 161             }
 162           });
 163           return list;
 164         }
 165       });
 166
 167     })();
 168   </script>
 169 </polymer-element>