ember-animatable
v2.0.0
Published
ember-animatable addon (animate.css component mixin)
Downloads
27
Maintainers
Readme
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 typebounce
, full list can be found hereanimationTarget
: 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 typebounce
, full list can be found herereturns
: 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
}
});
Installation
ember install ember-animatable