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.
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.
This is the overview.
The transition rule:
this.transition( this.hasClass('toLeft-demo'), this.use('toLeft', {duration}) );
The template:
<div class="card"> <div class="card-body"> <button {{action "toggleDetail"}}>Toggle Detail View</button> {{#liquid-if 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>