Template Helpers
-
<LiquidOutlet />
-
Transitions between routes.
-
<LiquidBind> </LiquidBind>
-
Transitions between models or other values within a single route.
-
{{#liquid-if}}
-
Switching between true and false branches in an #if statement.
-
<LiquidSpacer> </LiquidSpacer>
-
Provides a smoothly growing/shrinking container that animates
whenever its contained DOM mutates.
Common Behavior and Options
All of the above helpers share some core behaviors and
options:
-
Each helper is a semantic drop-in replacement for the
corresponding normal Ember helper.
-
Except
they generate DOM elements:
-
a
<div class="liquid-container">
to
serve as a container for animations. It
is
position:relative
by default.
-
a
<div class="liquid-child">
to wrap the
content and serve as a target for
animations.
-
Whenever bound data updates, the helper consults the
transition map
and decides whether to
animate the transition.
-
While animating, the
liquid-container
will
contain
liquid-children
for both the outgoing and
incoming states (or possibly even more, if transitions interrupt
each other), and the
transition
has full control over
animating them.
-
The
liquid-container
can animate it's own height
and width to smoothly match the size difference between its old and
new content.
-
liquid-fire makes your content absolutely positioned
only
while needed
for running animations, and deals with holding
your place in the normal document flow. This greatly simplifies the
problem of designing animation-friendly layouts.
Options
-
class
-
You can pass both static and bound class names in the normal
Ember way. They will apply to the
liquid-container
element.
-
use
-
Lets you provide a transition name directly
(example:
use="crossFade"
), skipping the transition
map. This is useful for the simplest cases in which you don't care
about context at all and always want to use the same
animation. The
use
will match all transitions except
the initial render. For more control, use the
transition map
.
-
growDuration
-
The maximum amount of time to spend growing. For small changes, we
may spend less than this time depending on
growPixelsPerSecond. Defaults to 250 milliseconds.
-
growPixelsPerSecond
-
The minimum speed in at which we will grow. Defaults to 200 pixels
per second. This lets us make small size adjustments in times
shorter than a full growDuration.
-
growEasing
-
A Velocity
easing
function
to use when growing the container height and
width. Defaults to
'slide'
.
-
shrinkDelay
-
A delay applied before the container shrinks in width or height.
Defaults to
0
.
-
growDelay
-
A delay applied before the container grows in width or height.
Defaults to
0
.
-
enableGrowth
-
Whether the container should animate its own height and width
changes. Defaults to
true
.
