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 |