| OLD | NEW |
| (Empty) |
| 1 # neon-animation | |
| 2 | |
| 3 `neon-animation` is a suite of elements and behaviors to implement pluggable ani
mated transitions for Polymer Elements using [Web Animations](https://w3c.github
.io/web-animations/). | |
| 4 | |
| 5 *Warning: The API may change.* | |
| 6 | |
| 7 * [A basic animatable element](#basic) | |
| 8 * [Animation configuration](#configuration) | |
| 9 * [Animation types](#configuration-types) | |
| 10 * [Configuration properties](#configuration-properties) | |
| 11 * [Using multiple animations](#configuration-multiple) | |
| 12 * [Running animations encapsulated in children nodes](#configuration-encapsula
tion) | |
| 13 * [Page transitions](#page-transitions) | |
| 14 * [Shared element animations](#shared-element) | |
| 15 * [Declarative page transitions](#declarative-page) | |
| 16 * [Included animations](#animations) | |
| 17 * [Demos](#demos) | |
| 18 | |
| 19 <a name="basic"></a> | |
| 20 ## A basic animatable element | |
| 21 | |
| 22 Elements that can be animated should implement the `Polymer.NeonAnimatableBehavi
or` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsib
le for running an animation. | |
| 23 | |
| 24 ```js | |
| 25 Polymer({ | |
| 26 is: 'my-animatable', | |
| 27 behaviors: [ | |
| 28 Polymer.NeonAnimationRunnerBehavior | |
| 29 ], | |
| 30 properties: { | |
| 31 animationConfig: { | |
| 32 value: function() { | |
| 33 return { | |
| 34 // provided by neon-animation/animations/scale-down-animation.html | |
| 35 name: 'scale-down-animation', | |
| 36 node: this | |
| 37 } | |
| 38 } | |
| 39 } | |
| 40 }, | |
| 41 listeners: { | |
| 42 // this event is fired when the animation finishes | |
| 43 'neon-animation-finish': '_onNeonAnimationFinish' | |
| 44 }, | |
| 45 animate: function() { | |
| 46 // run scale-down-animation | |
| 47 this.playAnimation(); | |
| 48 }, | |
| 49 _onNeonAnimationFinish: function() { | |
| 50 console.log('animation done!'); | |
| 51 } | |
| 52 }); | |
| 53 ``` | |
| 54 | |
| 55 [Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/n
eon-animation/demo/doc/basic.html) | |
| 56 | |
| 57 <a name="configuration"></a> | |
| 58 ## Animation configuration | |
| 59 | |
| 60 <a name="configuration-types"></a> | |
| 61 ### Animation types | |
| 62 | |
| 63 An element might run different animations, for example it might do something dif
ferent when it enters the view and when it exits from view. You can set the `ani
mationConfig` property to a map from an animation type to configuration. | |
| 64 | |
| 65 ```js | |
| 66 Polymer({ | |
| 67 is: 'my-dialog', | |
| 68 behaviors: [ | |
| 69 Polymer.NeonAnimationRunnerBehavior | |
| 70 ], | |
| 71 properties: { | |
| 72 opened: { | |
| 73 type: Boolean | |
| 74 }, | |
| 75 animationConfig: { | |
| 76 value: function() { | |
| 77 return { | |
| 78 'entry': { | |
| 79 // provided by neon-animation/animations/scale-up-animation.html | |
| 80 name: 'scale-up-animation', | |
| 81 node: this | |
| 82 }, | |
| 83 'exit': { | |
| 84 // provided by neon-animation/animations/fade-out-animation.html | |
| 85 name: 'fade-out-animation', | |
| 86 node: this | |
| 87 } | |
| 88 } | |
| 89 } | |
| 90 } | |
| 91 }, | |
| 92 listeners: { | |
| 93 'neon-animation-finish': '_onNeonAnimationFinish' | |
| 94 }, | |
| 95 show: function() { | |
| 96 this.opened = true; | |
| 97 this.style.display = 'inline-block'; | |
| 98 // run scale-up-animation | |
| 99 this.playAnimation('entry'); | |
| 100 }, | |
| 101 hide: function() { | |
| 102 this.opened = false; | |
| 103 // run fade-out-animation | |
| 104 this.playAnimation('exit'); | |
| 105 }, | |
| 106 _onNeonAnimationFinish: function() { | |
| 107 if (!this.opened) { | |
| 108 this.style.display = 'none'; | |
| 109 } | |
| 110 } | |
| 111 }); | |
| 112 ``` | |
| 113 | |
| 114 [Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/n
eon-animation/demo/doc/types.html) | |
| 115 | |
| 116 You can also use the convenience properties `entryAnimation` and `exitAnimation`
to set `entry` and `exit` animations: | |
| 117 | |
| 118 ```js | |
| 119 properties: { | |
| 120 entryAnimation: { | |
| 121 value: 'scale-up-animation' | |
| 122 }, | |
| 123 exitAnimation: { | |
| 124 value: 'fade-out-animation' | |
| 125 } | |
| 126 } | |
| 127 ``` | |
| 128 | |
| 129 <a name="configuration-properties"></a> | |
| 130 ### Configuration properties | |
| 131 | |
| 132 You can pass additional parameters to configure an animation in the animation co
nfiguration object. | |
| 133 All animations should accept the following properties: | |
| 134 | |
| 135 * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAn
imationBehavior`. | |
| 136 * `node`: The target node to apply the animation to. Defaults to `this`. | |
| 137 * `timing`: Timing properties to use in this animation. They match the [Web Ani
mations Animation Effect Timing interface](https://w3c.github.io/web-animations/
#the-animationeffecttiming-interface). The | |
| 138 properties include the following: | |
| 139 * `duration`: The duration of the animation in milliseconds. | |
| 140 * `delay`: The delay before the start of the animation in milliseconds. | |
| 141 * `easing`: A timing function for the animation. Matches the CSS timing fun
ction values. | |
| 142 | |
| 143 Animations may define additional configuration properties and they are listed in
their documentation. | |
| 144 | |
| 145 <a name="configuration-multiple"></a> | |
| 146 ### Using multiple animations | |
| 147 | |
| 148 Set the animation configuration to an array to combine animations, like this: | |
| 149 | |
| 150 ```js | |
| 151 animationConfig: { | |
| 152 value: function() { | |
| 153 return { | |
| 154 // fade-in-animation is run with a 50ms delay from slide-down-animation | |
| 155 'entry': [{ | |
| 156 name: 'slide-down-animation', | |
| 157 node: this | |
| 158 }, { | |
| 159 name: 'fade-in-animation', | |
| 160 node: this, | |
| 161 timing: {delay: 50} | |
| 162 }] | |
| 163 } | |
| 164 } | |
| 165 } | |
| 166 ``` | |
| 167 | |
| 168 <a name="configuration-encapsulation"></a> | |
| 169 ### Running animations encapsulated in children nodes | |
| 170 | |
| 171 You can include animations in the configuration that are encapsulated in a child
element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` p
roperty. | |
| 172 | |
| 173 ```js | |
| 174 animationConfig: { | |
| 175 value: function() { | |
| 176 return { | |
| 177 // run fade-in-animation on this, and the entry animation on this.$.myAnim
atable | |
| 178 'entry': [ | |
| 179 {name: 'fade-in-animation', node: this}, | |
| 180 {animatable: this.$.myAnimatable, type: 'entry'} | |
| 181 ] | |
| 182 } | |
| 183 } | |
| 184 } | |
| 185 ``` | |
| 186 | |
| 187 <a name="page-transitions"></a> | |
| 188 ## Page transitions | |
| 189 | |
| 190 *The artist formerly known as `<core-animated-pages>`* | |
| 191 | |
| 192 The `neon-animated-pages` element manages a set of pages to switch between, and
runs animations between the page transitions. It implements the `Polymer.IronSel
ectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimata
bleBehavior` and define the `entry` and `exit` animations. During a page transit
ion, the `entry` animation is run on the new page and the `exit` animation is ru
n on the old page. | |
| 193 | |
| 194 <a name="shared-element"></a> | |
| 195 ### Shared element animations | |
| 196 | |
| 197 Shared element animations work on multiple nodes. For example, a "hero" animatio
n is used during a page transition to make two elements from separate pages appe
ar to animate as a single element. Shared element animation configurations have
an `id` property that identify they belong in the same animation. Elements conta
ining shared elements also have a `sharedElements` property defines a map from `
id` to element, the element involved with the animation. | |
| 198 | |
| 199 In the incoming page: | |
| 200 | |
| 201 ```js | |
| 202 properties: { | |
| 203 animationConfig: { | |
| 204 value: function() { | |
| 205 return { | |
| 206 // the incoming page defines the 'entry' animation | |
| 207 'entry': { | |
| 208 name: 'hero-animation', | |
| 209 id: 'hero', | |
| 210 toPage: this | |
| 211 } | |
| 212 } | |
| 213 } | |
| 214 }, | |
| 215 sharedElements: { | |
| 216 value: function() { | |
| 217 return { | |
| 218 'hero': this.$.hero | |
| 219 } | |
| 220 } | |
| 221 } | |
| 222 } | |
| 223 ``` | |
| 224 | |
| 225 In the outgoing page: | |
| 226 | |
| 227 ```js | |
| 228 properties: { | |
| 229 animationConfig: { | |
| 230 value: function() { | |
| 231 return { | |
| 232 // the outgoing page defines the 'exit' animation | |
| 233 'exit': { | |
| 234 name: 'hero-animation', | |
| 235 id: 'hero', | |
| 236 fromPage: this | |
| 237 } | |
| 238 } | |
| 239 } | |
| 240 }, | |
| 241 sharedElements: { | |
| 242 value: function() { | |
| 243 return { | |
| 244 'hero': this.$.otherHero | |
| 245 } | |
| 246 } | |
| 247 } | |
| 248 } | |
| 249 ``` | |
| 250 | |
| 251 <a name="declarative-page"></a> | |
| 252 ### Declarative page transitions | |
| 253 | |
| 254 For convenience, if you define the `entry-animation` and `exit-animation` attrib
utes on `<neon-animated-pages>`, those animations will apply for all page transi
tions. | |
| 255 | |
| 256 For example: | |
| 257 | |
| 258 ```js | |
| 259 <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-anima
tion="slide-from-right-animation" exit-animation="slide-left-animation"> | |
| 260 <neon-animatable>1</neon-animatable> | |
| 261 <neon-animatable>2</neon-animatable> | |
| 262 <neon-animatable>3</neon-animatable> | |
| 263 <neon-animatable>4</neon-animatable> | |
| 264 <neon-animatable>5</neon-animatable> | |
| 265 </neon-animated-pages> | |
| 266 ``` | |
| 267 | |
| 268 The new page will slide in from the right, and the old page slide away to the le
ft. | |
| 269 | |
| 270 <a name="animations"></a> | |
| 271 ## Included animations | |
| 272 | |
| 273 Single element animations: | |
| 274 | |
| 275 * `fade-in-animation` Animates opacity from `0` to `1`; | |
| 276 * `fade-out-animation` Animates opacity from `1` to `0`; | |
| 277 * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`; | |
| 278 * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`; | |
| 279 * `slide-down-animation` Animates transform from `translateY(-100%)` to `none`; | |
| 280 * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`; | |
| 281 * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `no
ne`; | |
| 282 * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `
none`; | |
| 283 * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`; | |
| 284 * `slide-right-animation` Animates transform from `none` to `translateX(100%)`; | |
| 285 * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `n
one`; | |
| 286 * `slide-from-right-animation` Animates transform from `translateX(100%)` to `n
one`; | |
| 287 * `transform-animation` Animates a custom transform. | |
| 288 | |
| 289 Note that there is a restriction that only one transform animation can be applie
d on the same element at a time. Use the custom `transform-animation` to combine
transform properties. | |
| 290 | |
| 291 Shared element animations | |
| 292 | |
| 293 * `hero-animation` Animates an element such that it looks like it scales and tr
ansforms from another element. | |
| 294 * `ripple-animation` Animates an element to full screen such that it looks like
it ripples from another element. | |
| 295 | |
| 296 Group animations | |
| 297 * `cascaded-animation` Applys an animation to an array of elements with a delay
between each. | |
| 298 | |
| 299 <a name="demos"></a> | |
| 300 ## Demos | |
| 301 | |
| 302 * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower
_components/neon-animation/demo/grid/index.html) | |
| 303 * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_c
omponents/neon-animation/demo/load/index.html) | |
| 304 * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower
_components/neon-animation/demo/list/index.html) (For narrow width) | |
| 305 * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_com
ponents/neon-animation/demo/tiles/index.html) | |
| 306 * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_compone
nts/neon-animation/demo/declarative/index.html) | |
| OLD | NEW |