We're dsplce.co, check out our work on our website: 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.3" }

or:

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

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

The latest version of this crate requires Dioxus version 0.7. Check the compatibility table for other supported Dioxus versions.

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 (<!--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

Compatibility with Dioxus versions

📁 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.