Ember Mixin which provides convenient way using animate.css animations in components. Demo
-
animate(animationType:string, animationTarget:string): promise
animationType: animation typebounce, 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
-
animate(animationTarget:string/element, animationType:string): promise
animationTarget: css selector.class-nameanimationType: animation typebounce, full list can be found here
returns: promise which is resolved when animation finishes
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 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')
});
}
});
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
}
}); ember install ember-animatable