leptos-transition-flip

启用基于转换的FLIP动画，适用于通过NodeRefs引用的元素。

示例

(为了避免大型GIF文件，质量和帧率被极大降低)

如何使用

此crate公开的单个函数负责将给定任意ID的HashMap的初始位置转换为它们的NodeRefs、DOM重绘目标和过渡属性以确定元素移动的平滑度，例如 "all 0.6s"（CSS的 "transition" 属性），并返回一个 (flip, clear) 元组。

应在元素处于初始位置时调用 prepare_flip 函数。然后，在NodeRefs元素的位 置更改后立即调用 flip。过渡结束后，应调用 clear 从给定元素中删除应用过的样式属性。请注意，然而，最后一步是可选的，如果您在固定时间间隔后使用它，可能会遇到截断可能在前一个过渡结束前触发的第二个过渡。这发生在过渡属性在第二个过渡元素接近其目标时被清除，导致可见的跳跃。为了避免这种情况，您可能只在所有过渡的最后一刻调用 clear 函数。

使用示例

let (flip, clear) = prepare_flip(
    ids_to_node_refs,
    container_div_node_ref,
    "transform 0.6s"
).unwrap();

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

// Perform FLIP
let _ = flip();

set_timeout(|| { let _ = clear(); }, Duration::from_millis(600));

完整的示例项目可以在 此处 找到。