Using Liquid Fire to create transitions

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.

How to do it...

  1. 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 and tut2 routes as well as install the liquid-fire add-on.

  2. Create a new 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.

  3. Update the application template with the Liquid Fire outlet:
    // 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) mutates
  4. In the index template file, add a link to the tut1 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.

  5. Update the 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.

  6. Run the server and you'll see the transitions as you click on the links:
    How to do it...

    This is what it looks like mid-transition using crossfade from the application route to the tut1 route.

How it works...

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.123.192