@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. Please note that these elements do not include the web-animations polyfill.

See: Documentation,
Demo.

_See the guide for detailed usage._

Usage

$3

Element:
``
npm install --save @polymer/neon-animation
`

Polyfill:
`
npm install --save web-animations-js
`

$3

$3


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

;
}
}
customElements.define('sample-element', SampleElement);
`

$3

#### 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/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,
};

setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
`

$3

A simple element that implements NeonAnimatableBehavior.

#### In an html file
`html













`

#### 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/neon-animatable.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';

class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
static get template() {
return html

this div and its parent 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.$.animatable,
};

setTimeout(() => this.playAnimation(), 1000);
}
}
customElements.define('sample-element', SampleElement);
`

$3


neon-animated-pages manages a set of pages and runs an animation when
switching between them.

#### In an html file
`html





id="pages"
selected="0"
entry-animation="slide-from-right-animation"
exit-animation="slide-left-animation">
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
id="pages"
selected="0"
entry-animation="slide-from-right-animation"
exit-animation="slide-left-animation">
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

this div and its parent 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.$.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:

$3

`sh
git clone https://github.com/PolymerElements/neon-animation
cd neon-animation
npm install
npm install -g polymer-cli
`

$3

`sh
polymer serve --npm
open http://127.0.0.1:/demo/
`

$3

`sh
polymer test --npm
``