The leptos_transition_flip Crate

Svelte trivializes the creation of element transitions among lists with the crossfade function. The resulting effect is this:

As I wanted the same effect with the also great Leptos Rust crate, I wrote a small crate, leptos_transition_flip. It results in the same effect (click to play video):

Here is a simple usage example:

  
    
// Call before changing NodeRefs' positions
let (flip, clear) = prepare_flip(
    ids_to_node_refs,
    container_div_node_ref,
    "transform 0.6s"
).map_err(|err| format!("FLIP preparation failed with error: {err}"))?;

// Perform action that will change the NodeRefs' positions in page, such as setting signals
// ...

// Perform FLIP animation
flip().map_err(|err| format!("FLIP failed with error: {err}"))?;

// Await end, and then clear transition style
set_timeout(|| {
    if let Err(err) = clear() {
      console_log("Error occurred when trying to clear FLIP transition style: {err}");
    }
}, Duration::from_millis(600));
  
  

A full code example can be found here.