We're dsplce.co, check out our work on github.com/dsplce-co 🖤

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.2" }

or:

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

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

Fullstack applications

You need to enable the crate's SSR feature on the server for fullstack apps:

[features]
server = ["dioxus/server", "dioxus-transition/ssr"]

This will tell dioxus-transition not to perform DOM-related operations at the stage of server side rendering.

⚡ 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 ()
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.

dioxus-transition 0.2.0