Easiest way to animate transitions using custom CSS3

1

It is easy to use https://github.com/jerel/ember-cli-loading-slider but it is javascript animation and a bit hard to customize.

Lets do CSS3 animations with power of ember! lets see how easy it is!

  • Make a serivce that will hold the animation state.
//service/states.js
import Ember from 'ember';

export default Ember.Service.extend({
  animate: false
});
  • Put an element with css3 animation. Should make it a component so it can be reused.
{{!-- templates/index.hbs or can set on application.hbs if you want global animation --}}

{{#if states.animate}}
<div class="your-custom-animation"> </div>
{{/if}}
  • start animation at willTransition() and stop at afterModel()
  • Apply that on any routes that you want to animate
/// route/index.js or any other route you want to animate
import Ember from 'ember';

export default Ember.Route.extend({
  states: Ember.inject.service(),
  actions: {
    willTransition() {
      this.set("states.animate",true)
    }
  },
  afterModel(){
    this.set("states.animate",false)
  }
});
  • ???
  • PROFIT! Your custom animations everywhere!