Expand description
Drop animations. Experimental - this module is the one part of the
crate whose behavior depends on browser paint timing rather than pure
logic; validate it in your target renderer and tune duration to taste.
FlipItem implements the FLIP technique (First–Last–Invert–Play) for
reorder transitions: when your list order changes, each item measures
where it moved from, renders instantly back at its old position via a
transform, then releases the transform with a CSS transition - so tiles
appear to glide to their new slots.
You drive it with an epoch counter: bump it whenever order changes.
let mut items = use_signal(|| vec![/* … */]);
let mut epoch = use_signal(|| 0usize);
rsx! {
SortableList {
len: items.read().len(),
render: move |ix: usize| rsx! {
FlipItem { epoch: epoch(), Row { item: items.read()[ix].clone() } }
},
on_sort: move |ev: SortEvent| {
apply_sort(&mut items.write(), ev);
epoch += 1;
},
}
}Drop-settle (the ghost gliding into the receiving zone on drop) is
built in: set settle: true on
crate::core::components::DragOverlay. Snap-back on cancel needs
no Rust at all - it’s a CSS recipe: give the overlay’s child
transition: transform 150ms ease and revert your item’s
data-dragging styles with a transition.
Re-exports§
pub use FlipItem_completions::Component::FlipItem;
Structs§
- Flip
Item Props - Properties for the
FlipItemcomponent.
Functions§
- Flip
Item - Wraps one list/grid item and glides it to its new position whenever
epochchanges. See the module docs for the driving pattern.