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 |