Predefined Transitions

The library includes a small set of predefined transitions. They are intended as a starting point, and you are encouraged to add your own transitions that expand up on them.

For more information about these transitions, you can read the source code.

toLeft, toRight, toUp, toDown
These are slide animations powered by the CSS transform property. They all accept an optional options hash that"s passed onward to Velocity for both the outgoing and incoming animations. For more information about available options, please refer to official Velocity documentation.

The transition rule:

this.transition(
  this.hasClass('toLeft-demo'),
  this.use('toLeft', { duration }),
);

The template:

<div class="card">
  <div class="card-body">
    <button type="button" {{on "click" this.toggleDetail}}>Toggle Detail View</button>
    {{#liquid-if predicate=this.showDetail class="toLeft-demo"}}
        <div class="details">
            <h3>Details</h3>

            <p>
                Bacon ipsum dolor amet shank pork belly boudin flank
                prosciutto alcatra andouille pig short ribs biltong kevin
                salami tail turkey beef ribs.
            </p>
        </div>
    {{else}}
        <div class="overview">
            <h3>Welcome</h3>

            <p>This is the overview.</p>
        </div>
    {{/liquid-if}}
  </div>
</div>