dioxus-transition-0.1.1 has been yanked.

dioxus-transition

🎬 Seamless transitions in Dioxus, inspired by Vue’s <Transition> — declarative, built-in, composable.

This crate provides a fully reactive <Transition> component for Dioxus, allowing you to animate elements when they enter or leave the DOM — with full SSR/Web support and no JS shenanigans.

🖤 Features

✅ <Transition> component for conditional DOM animations ✅ Vue-style logic with signal-reactive updates ✅ Built-in transitions: fade, blur — easy to extend ✅ Opt-out of built-ins via default-features = false ✅ Works out-of-the-box with Dioxus Web ✅ Built for flexibility: own styles, custom lifecycles, fine-grained control

📦 Installation

Add it to your Cargo.toml:

[dependencies]
dioxus-transition = "0.1"

# Optional: disable built-in transitions and use your own
default-features = false

⚡ Example

use dioxus::prelude::*;
use dioxus_transition::prelude::*;

fn main() {
  dioxus::web::launch(App);
}

#[component]
fn App() -> Element {
    let mut visible = use_signal(bool::default);

    rsx! {
        div {
            button {
                onclick: move |_| visible.set(!visible()),
                "Toggle"
            }

            Transition {
                id: "square",
                kind: "fade", // try "blur", or define your own
                duration: 300,

                if visible() {
                    div {
                        id: "square",
                        display: "block",
                        width: "200px",
                        height: "200px",
                        background: "red",
                    }
                }
            }
        }
    }
}

🧠 How It Works

The <Transition> component:

Tracks whether its children are present or placeholder
On entrance: injects *-transition-hidden, then animates in with *-transition-activating
On exit: runs reverse animation and cleans up
You control:
- id: DOM node to animate
- kind: animation class prefix (e.g. fade)
- duration: in ms
- ignore_first: skip entrance animation on first mount (default: false)

🎨 Built-In Styles (enabled by default)

/* fade */
.fade-transition-hidden {
  opacity: 0;
}
.fade-transition-activating {
  opacity: 1;
}

/* blur */
.blur-transition-hidden {
  backdrop-filter: brightness(1) blur(0);
}
.blur-transition-activating {
  backdrop-filter: brightness(0.375) blur(2px);
}

Don’t like them? Set default-features = false and roll your own 🧘

🧩 Custom Transitions

Use any CSS class name as kind. All that matters is you provide these two classes:

.yourkind-transition-hidden — initial state
.yourkind-transition-activating — active state

📁 Repo & Contributions

📦 Crate: crates.io/crates/dioxus-transition 🛠️ Repo: github.com/dsplce-co/dioxus-transition

Contributions, issues, ideas? Hit us up — let's make transitions in Dioxus delightful. 🖤

📄 License

MIT or Apache-2.0, at your option.

dioxus-transition 0.1.1