View Source LiveMotion.JS (LiveMotion v0.1.1)
Provides functions for triggering client side animations without a round-trip to the server.
The functions in this module follow the same conventions (more or less) like in the
Phoenix.LiveView.JS
module and are intended to be used instead if you are dealing
with animations. Most of the functions return a Phoenix.LiveView.JS
struct, so they
can be composed with the LiveView utility functions.
The following utilities are included:
animate
- Triggers an animation on an element.toggle
- Toggles between two animations.hide
- Performs an animation and hides the element from the DOM.show
- Shows elements and immediately performs the animation.
Consider the following example to hide an element without a round-trip to the server.
def popcorn(assigns) do
~H"""
<div>
<LiveMotion.motion
id="popcorn"
initial={[opacity: 1]}
exit={[opacity: 0]}
>
<span>🍿</span>
</LiveMotion.motion>
<button type="button" phx-click={LiveMotion.JS.hide(to: "#popcorn")}>
Eat popcorn
</button>
</div>
"""
end
Clicking the "Eat popcorn" button will trigger the exit animation on the motion
element.
You can also define animations in the call to LiveMotion.JS.hide/1
. See it's documentation
for more information.
Link to this section Summary
Functions
Animates the target.
Performs an animation and hides an element after the animation has finished.
Animates between two animation states.
Link to this section Functions
Animates the target.
example
Example
def popcorn(assigns) do
~H"""
<div>
<div id="popcorn" style="font-size: 64px">
<span>🍿</span>
</div>
<button
type="button"
phx-click={
LiveMotion.JS.animate(
[rotate: [0, 20, -10, 30, -10, 0]],
[duration: 0.5],
to: "#popcorn"
)
}
>
Shake it!
</button>
</div>
"""
options
Options
to
- The query selector on which element to perform the animation. If the option is not provided, the target element will be used.
Performs an animation and hides an element after the animation has finished.
Triggers the exit
animation defined on the target.
Additionally allows keyframes
and transition
to be defined. These will be used
to animate the target element and therefore the target does not require to be a
LiveMotion.motion
component.
options
Options
to
- The query selector on which element to perform the animation. If the option is not provided, the target element will be used.keyframes
- The keyframe keyword list defining the animations.transition
- Transition options.
Animates between two animation states.
example
Example
def popcorn(assigns) do
~H"""
<div>
<div id="popcorn" style="font-size: 64px">
<span>🍿</span>
</div>
<button
type="button"
phx-click={
LiveMotion.JS.toggle(
[
in: [x: -200],
out: [x: 200]
],
[],
to: "#popcorn"
)
}
>
Move popcorn
</button>
</div>
"""
options
Options
to
- The query selector on which element to perform the animation. If the option is not provided, the target element will be used.