Crates.io | dioxus-spring |
lib.rs | dioxus-spring |
version | |
source | src |
created_at | 2023-10-16 00:05:22.610519 |
updated_at | 2025-01-30 20:18:55.402086 |
description | Animation library for Dioxus |
homepage | |
repository | |
max_upload_size | |
id | 1004186 |
Cargo.toml error: | TOML parse error at line 17, column 1 | 17 | autolib = false | ^^^^^^^ unknown field `autolib`, expected one of `name`, `version`, `edition`, `authors`, `description`, `readme`, `license`, `repository`, `homepage`, `documentation`, `build`, `resolver`, `links`, `default-run`, `default_dash_run`, `rust-version`, `rust_dash_version`, `rust_version`, `license-file`, `license_dash_file`, `license_file`, `licenseFile`, `license_capital_file`, `forced-target`, `forced_dash_target`, `autobins`, `autotests`, `autoexamples`, `autobenches`, `publish`, `metadata`, `keywords`, `categories`, `exclude`, `include` |
size | 0 |
Animation library for Dioxus.
Pairs great with dioxus-use-gesture!
let container_ref = use_mounted();
let rect = use_size(container_ref);
let mut is_big = use_signal(|| false);
let spring = use_spring(
if is_big() { rect.width() as f32 } else { 0f32 },
Duration::from_millis(500),
);
let animated_ref = use_mounted();
use_animated(animated_ref, spring, |width| {
format!(
r"
width: {width}px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #27ae60;
"
)
});
rsx!(
div {
position: "relative",
width: "200px",
height: "50px",
border: "2px solid #eee",
onmounted: move |event| container_ref.onmounted(event),
onclick: move |_| is_big.set(!is_big()),
div { onmounted: move |event| animated_ref.onmounted(event) }
span {
position: "absolute",
top: "50%",
left: "50%",
transform: " translate(-50%, -50%)",
z_index: 9,
"Click me!"
}
}
)