Ember-css-animation-triggers NPM

Ember CSS Animation Triggers

Ember CSS Animation Triggers is an Ember addon with a collection of components for triggering CSS animations.

Installation

As an addon

ember install ember-css-animation-triggers

For development

git clone this repository
npm install
bower install

Usage

Ember CSS Animation Triggers currently includes two components: animate-on-change and animate-on-interval.

These components animate their content by applying a CSS class with an animation to their elements and removes it again after the animation is finished. Note that this addon doesn't provide any ready-made CSS animation classes; these have to be declared separately.

The components' individual usage is detailed below.

Component: `animate-on-change`

The animate-on-change component animates its content when a particular value changes.

In the example below, the CSS class grow will be applied to the element when the value of count changes:

{{#animate-on-change animationClass="grow" observedValue=count}}
  {{count}}
{{/animate-on-change}}

Which can look like this:

Example result of using `animate-on-change`

See tests/dummy/app for the complete implementation of the example above. It can be previewed by running the demo app.

The public interface of the component is given in the table below.

Property name	Type	Default	Description
`animationClass`	String	`null`	Name of the CSS class defining the animation.
`observedValue`	*	`null`	Value to observe.
`enabled`	Boolean	`true`	Whether the animation should run.

Component: `animate-on-interval`

The animate-on-interval component animates its content at a particular time interval.

In the example below, the CSS class hop will be applied to the component's element with pauses between 2 and 3 seconds between each animation, but it will be applied within 1 second the first time the animation is run.

{{#animate-on-interval
   animationClass="hop"
   minWait=2000
   maxWait=3000
   minInitialwait=0
   maxInitialwait=1000}}
  Hello!
{{/animate-on-interval}}

See the demo app in tests/dummy/app for en example of how to achieve the following effect:

Example result of using `animate-on-interval`

The public interface of the component is given in the table below.

Property name	Type	Default	Description
`animationClass`	String	`null`	Name of the CSS class defining the animation.
`minWait`	Number	`1000`	Minimum time (ms) to wait before showing the animation again.
`maxWait`	Number	`2000`	Maximum time (ms) to wait before showing the animation again.
`minInitialWait`	Number	`500`	Minimum time (ms) to wait before showing the animation for the first time.
`maxInitialWait`	Number	`1000`	Maximum time (ms) to wait before showing the animation for the first time.
`enabled`	Boolean	`true`	Whether the animation shuld run.