Ember Liquid Fire is an add-on for Ember that handles animations and transitions. It's a toolkit of sorts that splits its responsibilities between template headers, transition maps, and transitions.
In this recipe, we'll create a few transitions to see how this add-on works.
In a new Ember application, generate these files:
$ ember g route tut1 $ ember g route tut2 $ ember g template index $ ember install liquid-fire
This will generate the scaffolding for the
tut1
andtut2
routes as well as install theliquid-fire
add-on.Create a new
transitions.js
file in the root of theapp
folder. Add a few transitions:// app/transitions.js export default function(){ this.transition( this.fromRoute('tut1'), this.toRoute('tut2'), this.use('toRight'), this.reverse('toLeft') ); this.transition( this.fromRoute('index'), this.toRoute('tut1'), this.use('crossFade'), this.reverse('fade',{duration...