| OLD | NEW |
|---|
| (Empty) |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.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` eleme
nts to | |
| 17 create a grouped web animation. The group may be parallel (type is `par`) or seq
uential | |
| 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-anim
ation-prop> | |
| 27 <core-animation-prop name="transform" value="rotate(45deg)"></core-ani
mation-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" ex
tends="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 th
e 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 durati
on 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 gr
oup'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.timi
ngProps); | |
| 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> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 666453002:
Removed Polymer elements depending on web-animations-js. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master