Animations

import time

from fasthtml.common import Button, Div, Form, Hr, Input, Script, Style, fast_app

css_demo1 = """
.smooth {
  transition: all 1s ease-in !important;
}
"""
css_demo2 = """
.fade-me-out.htmx-swapping {
  transition: opacity 2s ease-out !important;
  opacity: 0;
}
"""
css_demo3 = """
#demo3.htmx-added {
  opacity: 0;
}
#demo3 {
  opacity: 1;
  transition: opacity 1s ease-out !important;
}
"""
css_demo4 = """
form.htmx-request {
    opacity: .5;
    transition: opacity 300ms linear !important;
}
"""
css_demo5 = """
.demo5.faded {
    opacity:.3;
}
.demo5 {
    opacity:1;
    transition: opacity ease-in 900ms !important;
}
"""

app, rt = fast_app(
    hdrs=[
        Style(css_demo1 + css_demo2 + css_demo3 + css_demo4 + css_demo5),
        Script(src="https://unpkg.com/htmx-ext-class-tools@2.0.1/class-tools.js"),
    ],
    pico=False,
)


@app.get
def page():
    return Div(
        Div(Div("Example 1: Color Swap"), demo1()),
        Hr(),
        Div(Div("Example 2: Fade Out On Swap"), demo2()),
        Hr(),
        Div(Div("Example 3: Fade In On Addition"), demo3()),
        Hr(),
        Div(Div("Example 4: Request In Flight Animation"), demo4()),
        Hr(),
        Div(Div("Example 5: Class-tools Extension"), demo5()),
        cls="container",
    )


@app.get
def demo1(idx: int = 0):
    palette = ["red", "blue", "green", "orange"]
    next_idx = (idx + 1) % len(palette)
    return Div(
        "Color Swap Demo",
        id="color-demo",
        style=f"color:{palette[idx]}",
        hx_get=demo1.rt(idx=next_idx),
        hx_swap="outerHTML",
        hx_trigger="every 1s",
        cls="smooth",
    )


@app.get
def demo2():
    return Button("Fade Me Out", cls="fade-me-out", hx_delete=demo2_delete, hx_swap="outerHTML swap:2s")


@app.delete
def demo2_delete():
    return None


@app.get
def demo3():
    return Button("Fade Me In", hx_get=demo3, hx_swap="outerHTML settle:1s", id="demo3")


@app.get
def demo4():
    return Form(hx_post=demo4_form, hx_swap="outerHTML")(
        Input(name="name", placeholder="Your name here..."), Button("Submit", cls="btn primary")
    )


@app.post
def demo4_form():
    time.sleep(1)
    return Div("Submitted!")


@app.get
def demo5():
    return Div(Div("Toggle Demo", cls="demo5", classes="toggle faded:1s"), hx_ext="class-tools")

Server Calls