| OLD | NEW |
| 1 # neon-animation | 1 # neon-animation |
| 2 | 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/). | 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 | 4 |
| 5 *Warning: The API may change.* | 5 *Warning: The API may change.* |
| 6 | 6 |
| 7 * [A basic animatable element](#basic) | 7 * [A basic animatable element](#basic) |
| 8 * [Animation configuration](#configuration) | 8 * [Animation configuration](#configuration) |
| 9 * [Animation types](#configuration-types) | 9 * [Animation types](#configuration-types) |
| 10 * [Configuration properties](#configuration-properties) | 10 * [Configuration properties](#configuration-properties) |
| (...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 94 }, | 94 }, |
| 95 show: function() { | 95 show: function() { |
| 96 this.opened = true; | 96 this.opened = true; |
| 97 this.style.display = 'inline-block'; | 97 this.style.display = 'inline-block'; |
| 98 // run scale-up-animation | 98 // run scale-up-animation |
| 99 this.playAnimation('entry'); | 99 this.playAnimation('entry'); |
| 100 }, | 100 }, |
| 101 hide: function() { | 101 hide: function() { |
| 102 this.opened = false; | 102 this.opened = false; |
| 103 // run fade-out-animation | 103 // run fade-out-animation |
| 104 this.playAnimation('fade-out-animation'); | 104 this.playAnimation('exit'); |
| 105 }, | 105 }, |
| 106 _onNeonAnimationFinish: function() { | 106 _onNeonAnimationFinish: function() { |
| 107 if (!this.opened) { | 107 if (!this.opened) { |
| 108 this.style.display = 'none'; | 108 this.style.display = 'none'; |
| 109 } | 109 } |
| 110 } | 110 } |
| 111 }); | 111 }); |
| 112 ``` | 112 ``` |
| 113 | 113 |
| 114 [Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/n
eon-animation/demo/doc/types.html) | 114 [Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/n
eon-animation/demo/doc/types.html) |
| (...skipping 180 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 295 * `cascaded-animation` Applys an animation to an array of elements with a delay
between each. | 295 * `cascaded-animation` Applys an animation to an array of elements with a delay
between each. |
| 296 | 296 |
| 297 <a name="demos"></a> | 297 <a name="demos"></a> |
| 298 ## Demos | 298 ## Demos |
| 299 | 299 |
| 300 * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower
_components/neon-animation/demo/grid/index.html) | 300 * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower
_components/neon-animation/demo/grid/index.html) |
| 301 * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_c
omponents/neon-animation/demo/load/index.html) | 301 * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_c
omponents/neon-animation/demo/load/index.html) |
| 302 * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower
_components/neon-animation/demo/list/index.html) (For narrow width) | 302 * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower
_components/neon-animation/demo/list/index.html) (For narrow width) |
| 303 * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_com
ponents/neon-animation/demo/tiles/index.html) | 303 * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_com
ponents/neon-animation/demo/tiles/index.html) |
| 304 * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_compone
nts/neon-animation/demo/declarative/index.html) | 304 * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_compone
nts/neon-animation/demo/declarative/index.html) |
| OLD | NEW |