ecl

ember-cli-liquid-fire-events

Simple events triggered on Liquid Fire animations.

Showing:

Popularity

Downloads/wk

13

GitHub Stars

7

Maintenance

Last Commit

2yrs ago

Contributors

4

Package

Dependencies

2

Size (min+gzip)

1.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Ember Observer Score Build Status Coverage Status NPM Version NPM Downloads Dependency Status DevDependency Status Greenkeeper

ember-cli-liquid-fire-events

Provides a service liquid-fire-events that you can use to subscribe to the following events from Liquid Fire: transitionStart and transitionEnd.

DEMO

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above

Installation

ember install ember-cli-liquid-fire-events

Usage

Example usage:

export default Ember.Component.extend({
  liquidFireEvents: Ember.inject.service(),
  didInsertElement() {
    this.get('liquidFireEvents')
      .on('transitionStart', () => {
        this.set('animating', true);
    }).on('transitionEnd'), (newView) => {
        this.set('animating', false);
      });
  }
});

Note: these are global events, fired every time a Liquid Fire transition occurs anywhere within the rendered DOM.

Additionally, this addon provides a component liquid-delayed-render which wraps a block of markup and only renders it after a transition has finished. This is useful eg. to avoid rendering while animating, a common cause of jank especially in mobile browsers.

Example usage:

{{my-navigation-bar}}
{{! my-complex-component will not be rendered until the animation is complete}}
{{#liquid-delayed-render}}
  {{my-complex-component}}
{{/liquid-delayed-render}}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100