ember-animatable's Introduction

ember-animatable

Ember Mixin which provides convenient way using animate.css animations in components. Demo

Mixin Method

animate(animationType:string, animationTarget:string): promise
animationType: animation type bounce, full list can be found here
animationTarget: css selector .class-name (optional if not provided component is the target)
returns: promise which is resolved when animation finishes

Standalone Function

animate(animationTarget:string/element, animationType:string): promise
animationTarget: css selector .class-name animationType: animation type bounce, full list can be found here
returns: promise which is resolved when animation finishes

Import as mixin

import Ember from 'ember';
import AnimatableMixin from 'ember-animatable';

export default Ember.Component.extend(AnimatableMixin, {
    click() {
      let anim = this.animate('pulse', '.animation-target');
      anim.then(function() {
        console.log('animation complete')
      });
    }
});

Import as function

import Ember from 'ember';
import { animate } from 'ember-animatable';

export default Ember.Component.extend({
    click() {
      let anim = animate('.animation-target', 'pulse');
      anim.then(function() {
        console.log('animation complete')
      });
    }
});

Use what you need

By default addon will import all css animations provided by animate.css, but usually you don't need all css animations, so you can specify which once to import in app config.

 let app = new EmberApp(defaults, {
  'ember-animatable': {
    include: ['pulse', 'bounceIn'] // pulse and bounceIn animation will be imported
  }
});