ember-velocity-mixin

The Velocity Mixin makes it easier to use Velocity.js in your components.

Usage

ember install ember-velocity-mixin

Setting inline styles

import VelocityMixin from 'ember-velocity-mixin/main';
import Ember from 'ember';

const {
  Component,
  observer,
  on
} = Ember;

export default Component.extend(VelocityMixin, {
  width: '100px',
  updateWidth: observer('width', on('didInserElement', function() {
    this.css('width', this.get('width'));
  }))
});

Animation with Promises

import VelocityMixin from 'ember-velocity-mixin/main';
import Ember from 'ember';

const {
  Component
} = Ember;

export default Component.extend({
  actions: {
    collapse() {
      this.animate({ width: 0 })
        .then(() => { this.set('isCollapsed', true); });
    }
  }
});

API

css([element], property, [value])

css method can be used to get computed value of a specific element or set the CSS value for that element. It works similar to jQuery's css function but it's scoped to View's element and provides benefits of Velocity's optimizations.

animate([element], options)

animate method allows you to execute Velocity animation on current view or a given element. It accepts the same arguments as jQuery animation function. This method returns a promise. Learn more about Promises with Velocity.