实验性的 moveBefore() 支持

本页面演示了实验性的 moveBefore() DOM API 的使用，该 API 可在 Chrome Canary 中使用，并且已集成到 htmx 的 hx-preserve 属性中，如果可用的话。

获取 Chrome Canary 并启用 moveBefore()

要使演示正常工作，您需要安装 Chrome Canary 并启用该 API：

• 导航到 chrome://flags/#atomic-move
• 启用 “Atomic DOM move”

如果可用，htmx 会在 hx-preserve 功能中利用此 API，允许您将元素标记为“保留”，并在屏幕上新内容合并时保留其所有状态，同时在页面区域之间移动。这比当前备选方案（如 morphing）提供了显著更好的开发者体验，后者依赖于新页面的结构“足够接近”，以避免移动视频元素等内容。

演示

如果您检查下面的视频，您会看到它嵌入在一个 div 元素中。如果您点击“查看详情” 链接（该链接已启用 boost），您将过渡到另一个页面，该页面有一个具有相同 id 的视频元素，但嵌入在 figure 元素中。没有 moveBefore() 功能的情况下，在这种情况下不可能保持视频播放，因为“重新父级化”（即更改元素的父级）会导致其重置。

moveBefore() 通过允许开发者在保留元素播放状态、焦点等的同时完全更改页面的布局，为 Web 开发开辟了大量可能性。