ember-cli-liquid-fire-events

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

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

Installation

• git clone <repository-url>
• cd ember-cli-liquid-fire-events
• yarn install

Linting

• yarn lint:js
• yarn lint:js --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.