ember-animatable  

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

$3

- 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

$3

- 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

$3

``js
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')
});
}
});
`


$3


`js

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.

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

Installation


`js
ember install ember-animatable
``