https://github.com/dsplce-co/dioxus-transition
Seamless transitions in Dioxus, inspired by Vue’s <Transition> — declarative, built-in, composable.
https://github.com/dsplce-co/dioxus-transition
dioxus rust transition
Last synced: 4 months ago
JSON representation
Seamless transitions in Dioxus, inspired by Vue’s <Transition> — declarative, built-in, composable.
- Host: GitHub
- URL: https://github.com/dsplce-co/dioxus-transition
- Owner: dsplce-co
- Created: 2025-05-17T12:03:09.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-10-30T21:52:36.000Z (8 months ago)
- Last Synced: 2025-10-30T21:54:59.402Z (8 months ago)
- Topics: dioxus, rust, transition
- Language: Rust
- Homepage: https://crates.io/crates/dioxus-transition
- Size: 18.6 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dioxus-transition
> 🎬 Seamless transitions in [Dioxus](https://dioxuslabs.com/), inspired by Vue’s `` — declarative, built-in, composable.
This crate provides a fully reactive `` 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`:
```toml
[dependencies]
dioxus-transition = { version = "0.1" }
```
or:
```toml
[dependencies]
dioxus-transition = { version = "0.1", default-features = false }
```
to disable the default stylesheet (opt out of default transition kinds).
---
## ⚡ Example
```rust
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 `` 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)
```css
/* 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:
* `.-transition-hidden` — hidden state
* `.-transition-activating` — visible state
---
## 📁 Repo & Contributions
📦 Crate: [crates.io/crates/dioxus-transition](https://crates.io/crates/dioxus-transition)
🛠️ Repo: [github.com/dsplce-co/dioxus-transition](https://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.