neon-animation - Vaadin Add-on Directory
Polymer + Web Animations
[](https://www.npmjs.com/package/@polymer/neon-animation)
[](https://travis-ci.org/PolymerElements/neon-animation)
[](https://webcomponents.org/element/@polymer/neon-animation)
## neon-animation
`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/). Please note that these elements do not include the web-animations polyfill.
See: [Documentation](https://www.webcomponents.org/element/@polymer/neon-animation),
[Demo](https://www.webcomponents.org/element/@polymer/neon-animation/demo/demo/index.html).
_See [the guide](./guide.md) for detailed usage._
## Usage
### Installation
Element:
```
npm install --save @polymer/neon-animation
```
Polyfill:
```
npm install --save web-animations-js
```
### In an HTML file
### `NeonAnimatableBehavior`
Elements that can be animated by `NeonAnimationRunnerBehavior` should implement the `NeonAnimatableBehavior` behavior, or `NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimatableBehavior} from '@polymer/neon-animation/neon-animatable-behavior.js';
class SampleElement extends mixinBehaviors([NeonAnimatableBehavior], PolymerElement) {
static get template() {
return html`
`
A simple element that implements NeonAnimatableBehavior.
#### In an html file
```html
`;
}
connectedCallback() {
super.connectedCallback();
// must be set here because properties is static and cannot reference "this"
this.animationConfig = {
// provided by neon-animation/animations/scale-down-animation.js
name: 'scale-down-animation',
node: this.$.animatable,
};
setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
```
### ``
`neon-animated-pages` manages a set of pages and runs an animation when
switching between them.
#### In an html file
```html
1
2
3
4
5
```
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/neon-animation/neon-animated-pages.js';
import '@polymer/neon-animation/neon-animatable.js';
import '@polymer/neon-animation/animations/slide-from-right-animation.js';
import '@polymer/neon-animation/animations/slide-left-animation.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
1
2
3
4
5
`;
}
increase() {
this.$.pages.selected = this.$.pages.selected + 1 % 5;
}
decrease() {
this.$.pages.selected = (this.$.pages.selected - 1 + 5) % 5;
}
}
customElements.define('sample-element', SampleElement);
```
#### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/animations/neon-animatable.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';
class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
static get template() {
return html`
`;
}
connectedCallback() {
super.connectedCallback();
// must be set here because properties is static and cannot reference "this"
this.animationConfig = {
// provided by neon-animation/animations/scale-down-animation.js
name: 'scale-down-animation',
node: this.$.animatable,
};
setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/neon-animation
cd neon-animation
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```
this entire element will be animated after one second
`;
}
connectedCallback() {
super.connectedCallback();
// must be set here because properties is static and cannot reference "this"
this.animationConfig = {
// provided by neon-animation/animations/scale-down-animation.js
name: 'scale-down-animation',
node: this,
};
setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
```
### `this entire element and its parent will be animated after one second
this div will not be animated
this div and its parent will be animated after one second
this div will not be animated
this div and its parent will be animated after one second