Easiest way to animate transitions using custom CSS3

@v3ss0n wrote:

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!

Posts: 1

Participants: 1

Read full topic