| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 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 | 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 | 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 | 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 | 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 | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> | 8 --> |
| 9 <link rel="import" href="../polymer/polymer.html"> | 9 <link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> | 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> |
| 11 <link rel="import" href="../iron-selector/iron-selectable.html"> | 11 <link rel="import" href="../iron-selector/iron-selectable.html"> |
| 12 <link rel="import" href="neon-animation-runner-behavior.html"> | 12 <link rel="import" href="neon-animation-runner-behavior.html"> |
| 13 <link rel="import" href="animations/opaque-animation.html"> | 13 <link rel="import" href="animations/opaque-animation.html"> |
| 14 | 14 |
| 15 <!-- | 15 <!-- |
| 16 Material design: [Meaningful transitions](https://www.google.com/design/spec/ani
mation/meaningful-transitions.html) |
| 17 |
| 16 `neon-animated-pages` manages a set of pages and runs an animation when switchin
g between them. Its | 18 `neon-animated-pages` manages a set of pages and runs an animation when switchin
g between them. Its |
| 17 children pages should implement `Polymer.NeonAnimatableBehavior` and define `ent
ry` and `exit` | 19 children pages should implement `Polymer.NeonAnimatableBehavior` and define `ent
ry` and `exit` |
| 18 animations to be run when switching to or switching out of the page. | 20 animations to be run when switching to or switching out of the page. |
| 19 | 21 |
| 20 @group Neon Elements | 22 @group Neon Elements |
| 21 @element neon-animated-pages | 23 @element neon-animated-pages |
| 22 @demo demo/index.html | 24 @demo demo/index.html |
| 23 --> | 25 --> |
| 24 | 26 |
| 25 <dom-module id="neon-animated-pages"> | 27 <dom-module id="neon-animated-pages"> |
| (...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 126 } | 128 } |
| 127 | 129 |
| 128 // configure oldPage animations iff exists. | 130 // configure oldPage animations iff exists. |
| 129 if (oldPage) { | 131 if (oldPage) { |
| 130 | 132 |
| 131 // cancel the currently running animation if one is ongoing. | 133 // cancel the currently running animation if one is ongoing. |
| 132 if (oldPage.classList.contains('neon-animating')) { | 134 if (oldPage.classList.contains('neon-animating')) { |
| 133 this._squelchNextFinishEvent = true; | 135 this._squelchNextFinishEvent = true; |
| 134 this.cancelAnimation(); | 136 this.cancelAnimation(); |
| 135 this._completeSelectedChanged(); | 137 this._completeSelectedChanged(); |
| 138 this._squelchNextFinishEvent = false; |
| 136 } | 139 } |
| 137 | 140 |
| 138 // configure the animation. | 141 // configure the animation. |
| 139 if (this.exitAnimation) { | 142 if (this.exitAnimation) { |
| 140 this.animationConfig.push({ | 143 this.animationConfig.push({ |
| 141 name: this.exitAnimation, | 144 name: this.exitAnimation, |
| 142 node: oldPage | 145 node: oldPage |
| 143 }); | 146 }); |
| 144 } else { | 147 } else { |
| 145 if (oldPage.getAnimationConfig) { | 148 if (oldPage.getAnimationConfig) { |
| (...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 214 this.resizerShouldNotify = function(element) { | 217 this.resizerShouldNotify = function(element) { |
| 215 return element == selectedPage; | 218 return element == selectedPage; |
| 216 } | 219 } |
| 217 this.notifyResize(); | 220 this.notifyResize(); |
| 218 } | 221 } |
| 219 | 222 |
| 220 }) | 223 }) |
| 221 | 224 |
| 222 })(); | 225 })(); |
| 223 </script> | 226 </script> |
| OLD | NEW |