dioxus-transition 0.1.3

A Dioxus component for enter/leave transitions
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

> We're dsplce.co, check out our work on [github.com/dsplce-co](https://github.com/dsplce-co) 🖤

# dioxus-transition

> 🎬 Seamless transitions in [Dioxus](https://dioxuslabs.com/), 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<br/>
✅ Vue-style logic with signal-reactive updates<br/>
✅ Built-in transitions: `fade`, `blur` — easy to extend<br/>
✅ Opt-out of built-ins via `default-features = false`<br/>
✅ Built for flexibility: own styles, fine-grained control<br/>

---

## 📦 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 `<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)

```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:

* `.<kind>-transition-hidden` — hidden state
* `.<kind>-transition-activating` — visible state

---

## 📁 Repo & Contributions

📦 Crate: [crates.io/crates/dioxus-transition](https://crates.io/crates/dioxus-transition)<br/>
🛠️ Repo: [github.com/dsplce-co/dioxus-transition](https://github.com/dsplce-co/dioxus-transition)<br/>

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

---

## 📄 License

MIT or Apache-2.0, at your option.