| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 @license | |
| 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
| 4 This code may only be used under the BSD style license found at http://polym
er.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/CO
NTRIBUTORS.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/P
ATENTS.txt | |
| 9 --> | |
| 10 <link href="../core-selector/core-selector.html" rel="import"> | |
| 11 | |
| 12 <link href="transitions/hero-transition.html" rel="import"> | |
| 13 <link href="transitions/cross-fade.html" rel="import"> | |
| 14 | |
| 15 <!-- | |
| 16 | |
| 17 `core-animated-pages` selects one of its children "pages" to show and runs a tra
nsition | |
| 18 when switching between them. The transitions are designed to be pluggable, and c
an | |
| 19 accept any object that is an instance of a `core-transition-pages`. Transitions
to run | |
| 20 are specified in the `transitions` attribute as a space-delimited string of `id`
s of | |
| 21 transition elements. Several transitions are available with `core-animated-pages
` by | |
| 22 default, including `hero-transition`, `cross-fade`, and `tile-cascade`. | |
| 23 | |
| 24 Example: | |
| 25 | |
| 26 <style> | |
| 27 #hero1 { | |
| 28 position: absolute; | |
| 29 top: 0; | |
| 30 left: 0; | |
| 31 width: 300px; | |
| 32 height: 300px; | |
| 33 background-color: orange; | |
| 34 } | |
| 35 #hero2 { | |
| 36 position: absolute; | |
| 37 top: 200px; | |
| 38 left: 300px; | |
| 39 width: 300px; | |
| 40 height: 300px; | |
| 41 background-color: orange; | |
| 42 } | |
| 43 #bottom1, #bottom2 { | |
| 44 position: absolute; | |
| 45 bottom: 0; | |
| 46 top: 0; | |
| 47 left: 0; | |
| 48 height: 50px; | |
| 49 } | |
| 50 #bottom1 { | |
| 51 background-color: blue; | |
| 52 } | |
| 53 #bottom2 { | |
| 54 background-color: green; | |
| 55 } | |
| 56 </style> | |
| 57 // hero-transition and cross-fade are declared elsewhere | |
| 58 <core-animated-pages transitions="hero-transition cross-fade"> | |
| 59 <section id="page1"> | |
| 60 <div id="hero1" hero-id="hero" hero></div> | |
| 61 <div id="bottom1" cross-fade></div> | |
| 62 </section> | |
| 63 <section id="page2"> | |
| 64 <div id="hero2" hero-id="hero" hero></div> | |
| 65 <div id="bottom2" cross-fade></div> | |
| 66 </section> | |
| 67 </core-animated-pages> | |
| 68 | |
| 69 In the above example, two transitions (`hero-transition` and `cross-fade`) are r
un when switching | |
| 70 between `page1` and `page2`. `hero-transition` transforms elements with the same
`hero-id` such | |
| 71 that they appear to be shared across different pages. `cross-fade` fades out the
elements marked | |
| 72 `cross-fade` in the outgoing page, and fades in those in the incoming page. See
the individual | |
| 73 transition's documentation for specific details. | |
| 74 | |
| 75 Finding elements to transition | |
| 76 ------------------------------ | |
| 77 | |
| 78 In general, a transition is applied to elements marked with a certain attribute.
For example, | |
| 79 `hero-transition` applies the transition on elements with the `hero` and `hero-i
d` attribute. | |
| 80 Among the transitions included with `core-animated-pages`, script-based transiti
ons such as | |
| 81 `hero-transition` generally look for elements up to one level of shadowRoot from
the | |
| 82 `core-animated-pages` element, and CSS-based transitions such as `cross-fade` lo
ok for elements | |
| 83 within any shadowRoot within the `core-animated-pages` element. This means you c
an use | |
| 84 custom elements as pages and mark elements in their shadowRoots as heroes, or ma
rk | |
| 85 elements in deeper shadowRoots with other transitions. | |
| 86 | |
| 87 Example: | |
| 88 | |
| 89 <polymer-element name="x-el" noscript> | |
| 90 <template> | |
| 91 <style> | |
| 92 #hero { | |
| 93 position: absolute; | |
| 94 top: 0; | |
| 95 right: 0; | |
| 96 width: 50px; | |
| 97 height: 300px; | |
| 98 background-color: blue; | |
| 99 } | |
| 100 </style> | |
| 101 <div id="hero" hero-id="bar" hero></div> | |
| 102 </template> | |
| 103 </polymer-element> | |
| 104 | |
| 105 <polymer-element name="x-page-1" noscript> | |
| 106 <template> | |
| 107 <style> | |
| 108 #hero1 { | |
| 109 position: absolute; | |
| 110 top: 0; | |
| 111 left: 0; | |
| 112 width: 300px; | |
| 113 height: 300px; | |
| 114 background-color: orange; | |
| 115 } | |
| 116 </style> | |
| 117 <div id="hero1" hero-id="foo" hero></div> | |
| 118 <div id="hero2" hero-id="bar" hero></div> | |
| 119 </template> | |
| 120 </polymer-element> | |
| 121 | |
| 122 <polymer-element name="x-page-2" noscript> | |
| 123 <template> | |
| 124 <style> | |
| 125 #hero1 { | |
| 126 position: absolute; | |
| 127 top: 200px; | |
| 128 left: 300px; | |
| 129 width: 300px; | |
| 130 height: 300px; | |
| 131 background-color: orange; | |
| 132 } | |
| 133 #hero2 { | |
| 134 background-color: blue; | |
| 135 height: 150px; | |
| 136 width: 400px; | |
| 137 } | |
| 138 </style> | |
| 139 // The below element is one level of shadow from the core-animated-pages a
nd will | |
| 140 // be transitioned. | |
| 141 <div id="hero1" hero-id="foo" hero></div> | |
| 142 // The below element contains a hero inside its shadowRoot making it two l
evels away | |
| 143 // from the core-animated-pages, and will not be transitioned. | |
| 144 <x-el></x-el> | |
| 145 </template> | |
| 146 </polymer-element> | |
| 147 | |
| 148 <core-animated-pages transitions="hero-transition"> | |
| 149 <x-page-1></x-page-1> | |
| 150 <x-page-2></x-page-2> | |
| 151 </core-animated-pages> | |
| 152 | |
| 153 Note that the container element of the page does not participate in the transiti
on. | |
| 154 | |
| 155 // This does not work | |
| 156 <core-animated-pages transitions="cross-fade"> | |
| 157 <section cross-fade></section> | |
| 158 <section cross-fade></section> | |
| 159 </core-animated-pages> | |
| 160 | |
| 161 // This works | |
| 162 <core-animated-pages transitions="cross-fade"> | |
| 163 <section> | |
| 164 <div cross-fade></div> | |
| 165 </section> | |
| 166 <section> | |
| 167 <div cross-fade></div> | |
| 168 </section> | |
| 169 </core-animated-pages> | |
| 170 | |
| 171 Dynamically setting up transitions | |
| 172 ---------------------------------- | |
| 173 | |
| 174 An easy way to set up transitions dynamically is to use property binding on | |
| 175 the transition attributes. | |
| 176 | |
| 177 Example: | |
| 178 | |
| 179 <core-animated-pages selected="{{selected}}"> | |
| 180 <section id="page1"> | |
| 181 <div hero-id="hero" hero></div> | |
| 182 </section> | |
| 183 <section id="page2"> | |
| 184 <div id="foo" hero-id="hero" hero?="{{selected === 1 || selected === 0}}
" cross-fade="{{selected === 2}}"></div> | |
| 185 </section> | |
| 186 <section id="page3"> | |
| 187 </section> | |
| 188 </core-animated-pages> | |
| 189 | |
| 190 In the above example, the "foo" element only behaves as a hero element if transi
tioning between | |
| 191 `#page1` and `#page2`. It gets cross-faded when transition to or from `#page3`. | |
| 192 | |
| 193 Nesting pages | |
| 194 ------------- | |
| 195 | |
| 196 It is possible to nest core-animated-pages elements for organization. Excessive
nesting is | |
| 197 not encouraged, however, since it makes setting up the transition more complex. | |
| 198 | |
| 199 To nest core-animated-pages, the page containing the nested core-animated-pages
element should | |
| 200 have a `selectedItem` property bound to the `selectedItem` property of the neste
d element. This | |
| 201 will allow the outer core-animated-pages to know which nested page it is actuall
y transitioning | |
| 202 to. | |
| 203 | |
| 204 Example: | |
| 205 | |
| 206 <polymer-element name="nested-page" attributes="selectedItem"> | |
| 207 <template> | |
| 208 <core-animated-pages selectedItem="{{selectedItem}}"> | |
| 209 ... | |
| 210 </core-animated-pages> | |
| 211 </template> | |
| 212 </polymer-element> | |
| 213 | |
| 214 <core-animated-pages> | |
| 215 <section id="page1"></section> | |
| 216 <nested-page id="page2"></nested-page> | |
| 217 </core-animated-pages> | |
| 218 | |
| 219 @element core-animated-pages | |
| 220 @extends core-selector | |
| 221 @status beta | |
| 222 @homepage github.io | |
| 223 --> | |
| 224 <!-- | |
| 225 Fired before a page transition occurs. Both pages involved in the transition are
visible when | |
| 226 this event fires. This is useful if there is something the client needs to do wh
en a page becomes | |
| 227 visible. | |
| 228 | |
| 229 @event core-animated-pages-transition-prepare | |
| 230 --> | |
| 231 <!-- | |
| 232 Fired when a page transition completes. | |
| 233 | |
| 234 @event core-animated-pages-transition-end | |
| 235 --> | |
| 236 <polymer-element name="core-animated-pages" extends="core-selector" notap attrib
utes="transitions"> | |
| 237 | |
| 238 <template> | |
| 239 | |
| 240 <link href="core-animated-pages.css" rel="stylesheet"> | |
| 241 | |
| 242 <shadow></shadow> | |
| 243 | |
| 244 </template> | |
| 245 | |
| 246 <script> | |
| 247 | |
| 248 Polymer({ | |
| 249 | |
| 250 eventDelegates: { | |
| 251 'core-transitionend': 'transitionEnd' | |
| 252 }, | |
| 253 | |
| 254 /** | |
| 255 * A space-delimited string of transitions to use when switching between pag
es in this element. | |
| 256 * The strings are `id`s of `core-transition-pages` elements included elsewh
ere. See the | |
| 257 * individual transition's document for specific details. | |
| 258 * | |
| 259 * @attribute transitions | |
| 260 * @type string | |
| 261 * @default '' | |
| 262 */ | |
| 263 transitions: '', | |
| 264 | |
| 265 selected: 0, | |
| 266 | |
| 267 /** | |
| 268 * The last page selected. This property is useful to dynamically set transi
tions based | |
| 269 * on incoming and outgoing pages. | |
| 270 * | |
| 271 * @attribute lastSelected | |
| 272 * @type Object | |
| 273 * @default null | |
| 274 */ | |
| 275 lastSelected: null, | |
| 276 | |
| 277 registerCallback: function() { | |
| 278 this.tmeta = document.createElement('core-transition'); | |
| 279 }, | |
| 280 | |
| 281 created: function() { | |
| 282 this._transitions = []; | |
| 283 this.transitioning = []; | |
| 284 }, | |
| 285 | |
| 286 transitionsChanged: function() { | |
| 287 this._transitions = this.transitions.split(' '); | |
| 288 }, | |
| 289 | |
| 290 _transitionsChanged: function(old) { | |
| 291 if (this._transitionElements) { | |
| 292 this._transitionElements.forEach(function(t) { | |
| 293 t.teardown(this); | |
| 294 }, this); | |
| 295 } | |
| 296 this._transitionElements = []; | |
| 297 this._transitions.forEach(function(transitionId) { | |
| 298 var t = this.getTransition(transitionId); | |
| 299 if (t) { | |
| 300 this._transitionElements.push(t); | |
| 301 t.setup(this); | |
| 302 } | |
| 303 }, this); | |
| 304 }, | |
| 305 | |
| 306 getTransition: function(transitionId) { | |
| 307 return this.tmeta.byId(transitionId); | |
| 308 }, | |
| 309 | |
| 310 selectionSelect: function(e, detail) { | |
| 311 this.updateSelectedItem(); | |
| 312 // Wait to call applySelection when we run the transition | |
| 313 }, | |
| 314 | |
| 315 applyTransition: function(src, dst) { | |
| 316 if (this.animating) { | |
| 317 this.cancelAsync(this.animating); | |
| 318 this.animating = null; | |
| 319 } | |
| 320 | |
| 321 Platform.flush(); | |
| 322 | |
| 323 if (this.transitioning.indexOf(src) === -1) { | |
| 324 this.transitioning.push(src); | |
| 325 } | |
| 326 if (this.transitioning.indexOf(dst) === -1) { | |
| 327 this.transitioning.push(dst); | |
| 328 } | |
| 329 // force src, dst to display | |
| 330 src.setAttribute('animate', ''); | |
| 331 dst.setAttribute('animate', ''); | |
| 332 // | |
| 333 var options = { | |
| 334 src: src, | |
| 335 dst: dst, | |
| 336 easing: 'cubic-bezier(0.4, 0, 0.2, 1)' | |
| 337 } | |
| 338 | |
| 339 // fire an event so clients have a chance to do something when the | |
| 340 // new page becomes visible but before it draws. | |
| 341 this.fire('core-animated-pages-transition-prepare'); | |
| 342 | |
| 343 // | |
| 344 // prepare transition | |
| 345 this._transitionElements.forEach(function(transition) { | |
| 346 transition.prepare(this, options); | |
| 347 }, this); | |
| 348 // | |
| 349 // force layout! | |
| 350 src.offsetTop; | |
| 351 | |
| 352 // | |
| 353 // apply selection | |
| 354 this.applySelection(dst, true); | |
| 355 this.applySelection(src, false); | |
| 356 // | |
| 357 // start transition | |
| 358 this._transitionElements.forEach(function(transition) { | |
| 359 transition.go(this, options); | |
| 360 }, this); | |
| 361 | |
| 362 if (!this._transitionElements.length) { | |
| 363 this.complete(); | |
| 364 } else { | |
| 365 this.animating = this.async(this.complete.bind(this), null, 5000); | |
| 366 } | |
| 367 }, | |
| 368 | |
| 369 complete: function() { | |
| 370 if (this.animating) { | |
| 371 this.cancelAsync(this.animating); | |
| 372 this.animating = null; | |
| 373 } | |
| 374 | |
| 375 this.transitioning.forEach(function(t) { | |
| 376 t.removeAttribute('animate'); | |
| 377 }); | |
| 378 this.transitioning = []; | |
| 379 | |
| 380 this._transitionElements.forEach(function(transition) { | |
| 381 transition.ensureComplete(this); | |
| 382 }, this); | |
| 383 | |
| 384 this.fire('core-animated-pages-transition-end'); | |
| 385 }, | |
| 386 | |
| 387 transitionEnd: function(e) { | |
| 388 if (this.transitioning.length) { | |
| 389 var completed = true; | |
| 390 this._transitionElements.forEach(function(transition) { | |
| 391 if (!transition.completed) { | |
| 392 completed = false; | |
| 393 } | |
| 394 }); | |
| 395 if (completed) { | |
| 396 this.job('transitionWatch', function() { | |
| 397 this.complete(); | |
| 398 }, 100); | |
| 399 } | |
| 400 } | |
| 401 }, | |
| 402 | |
| 403 selectedChanged: function(old) { | |
| 404 this.lastSelected = old; | |
| 405 this.super(arguments); | |
| 406 }, | |
| 407 | |
| 408 selectedItemChanged: function(oldItem) { | |
| 409 this.super(arguments); | |
| 410 | |
| 411 if (!oldItem) { | |
| 412 this.applySelection(this.selectedItem, true); | |
| 413 return; | |
| 414 } | |
| 415 | |
| 416 if (this.hasAttribute('no-transition') || !this._transitionElements || !th
is._transitionElements.length) { | |
| 417 this.applySelection(oldItem, false); | |
| 418 this.applySelection(this.selectedItem, true); | |
| 419 return; | |
| 420 } | |
| 421 | |
| 422 if (oldItem && this.selectedItem) { | |
| 423 // TODO(sorvell): allow bindings to update first? | |
| 424 var self = this; | |
| 425 Platform.flush(); | |
| 426 Platform.endOfMicrotask(function() { | |
| 427 self.applyTransition(oldItem, self.selectedItem); | |
| 428 }); | |
| 429 } | |
| 430 } | |
| 431 | |
| 432 }); | |
| 433 | |
| 434 </script> | |
| 435 | |
| 436 </polymer-element> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master