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.
$ ember g route tut1 $ ember g route tut2 $ ember g template index $ ember install liquid-fire
This will generate the scaffolding for the tut1
and tut2
routes as well as install the liquid-fire
add-on.
transitions.js
file in the root of the app
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: 500}) ); }
Liquid Fire requires a transitions map file. There are a number of predefined transitions that you have available:
toLeft
toRight
toUp
toDown
crossFade
fade
Each one behaves as you would expect. The toLeft
transition will create a transition animation where the page moves from left to right. The toRight
transition is the exact opposite. You can also create your own animations if needed.
The map tells us which transitions to use when moving from one route to another.
// app/templates/application.hbs {{#link-to 'application'}}<h2 id="title">Welcome to Ember</h2>{{/link-to}} {{liquid-outlet}}
To use Liquid Fire transitions, we must use liquid-outlet
. This is used when transitioning between routes. Here are all the template helpers available:
{{#liquid-outlet}}
: This transitions between routes{{#liquid-with}}
: This transitions between models or contexts in a single route{{#liquid-bind}}
: This updates to simple bound values{{#liquid-if}}
: This switches between true and false branches in a #if
statement{{#liquid-spacer}}
: This provides a smoothly growing/shrinking container that animates whenever the contained Document Object Model (DOM) mutatestut1
route:// app/templates/index.hbs {{#link-to 'tut1'}}First Transition{{/link-to}}<br> {{liquid-outlet}}
The link-to
helper transitions to the tut1
route. The liquid outlet will display the tut1
route when it renders.
tut1
and tut2
route templates:// app/templates/tut1.hbs {{#link-to 'tut2'}}Tutorial 2{{/link-to}}<br> <div class="demo"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.In non aliquet quam. Vivamus egestas mi sapien, augue. </p> </div> {{liquid-outlet}}
All this does is have a link to the second route tut2
:
// app/templates/tut2 {{#link-to 'tut1'}}Tutorial 1{{/link-to}}<br> <div class='demo'> <p> Quisque molestie libero vel tortor viverra. Quisque eu posuere sem. Aenean ut arcu quam. Morbi orci dui, dictum ut libero in, venenatis tempor nulla. Nullam convallis mauris ante, sed venenatis augue auctor in. Morbi a mi a sapien dictum interdum. Quisque faucibus malesuada risus eget pretium. Ut elementum sapien ut nunc eleifend, at dapibus enim dignissim. </p> </div> {{liquid-outlet}}
This has a link back to tut1
.
This is what it looks like mid-transition using crossfade from the application route to the tut1
route.
Liquid Fire is a versatile add-on for Ember that brings transitions and animation to life. It uses a simple transition map and template helpers to make things easier. Under the hood, Liquid Fire uses many tricks to make these animations possible. It's extensible, so you can create your own transitions as well.