ember-cli-animate-shim

This ember-cli addon simplifies integration of animate.css with ember-cli apps.

See the animations in action here.

Installation

ember install ember-cli-animate-shim

Usage

• By default, all available animations will be included:

bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp

• Or specify the animations you need in your app's ember-cli-build.js like so:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'animate.css' : {
      include: ['bounce', 'zoomIn']
    }
  });

  return app.toTree();
};

Examples

• Animate by mixin

import Component from '@ember/component';
import AnimateMixin from 'ember-cli-animate-shim';

export default Component.extend(AnimateMixin, {
  click() {
    let log = message => {
      console.log(message);
    };

    this.animate(this.element, 'pulse').then(log);
  }
});

• Animate from a task

import Component from '@ember/component';
import AnimateMixin from 'ember-cli-animate-shim';
import { task, timeout } from 'ember-concurrency';

export default Component.extend(AnimateMixin, {
  animateTask: task(function* (animationType) {
    let message = yield this.animate(this.element, animationType);
    yield timeout(5); // allow some time between queued animations !important
    return message;
  }).enqueue(),

  execute() {
    let log = message => {
      console.log(message);
    };

    get(this, 'animateTask')
      .perform('bounce')
      .then(log);
  }
});

• Animate via function

/* your.js */
import Controller from '@ember/controller';
import { animate } from 'ember-cli-animate-shim';
import $ from 'jquery';

export default Controller.extend({
  actions: {
    openNews() {
      let callback = () => {
        window.open('//cnn.com', '_blank');
      };

      animate($('.news'), 'rubberBand').then(callback);
    }
  }
});

{{!-- your.hbs --}}
<p class="news" onclick={{action "openNews"}}>
  <span>News</span>
</p>