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.

🖤 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
✅ Built for flexibility: own styles, fine-grained control

📦 Installation

Add it to your Cargo.toml:

[dependencies]
dioxus-transition = { version = "0.1" }

or:

[dependencies]
dioxus-transition = { version = "0.1", default-features = false }

to disable the default stylesheet (opt out of default transition kinds).

⚡ 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 a placeholder (<!--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:

• .<kind>-transition-hidden — hidden state
• .<kind>-transition-activating — visible 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.