ember-velocity-mixin

0.3.0 • Public • Published

ember-velocity-mixin

Build Status

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.

Dependents (0)

Package Sidebar

Install

npm i ember-velocity-mixin

Weekly Downloads

3

Version

0.3.0

License

MIT

Last publish

Collaborators

  • runspired
  • taras