htmx Idiomorph 扩展

Idiomorph 是由 htmx 创建者创建的 DOM 形态转换算法。DOM 形态转换是一个将现有 DOM 树“变形”成另一个形状的过程，它以尽可能重用现有 DOM 节点的方式进行。通过在从一棵树更改到另一棵树时保留节点，您可以呈现两种状态之间更平滑的过渡。

您可以通过包含 Idiomorph 扩展将 Idiomorph 形态转换算法用作交换策略。

安装

<script src="https://unpkg.com/[email protected]/dist/idiomorph-ext.min.js"></script>

用法

一旦您引用了 Idiomorph 扩展，您就可以在 body 上使用名称 morph 注册它，然后开始使用 morph、morph:outerHTML 或 morph:innerHTML 作为交换策略。

morph & morph:outerHTML 将对目标元素及其子元素进行形态转换
morph:innerHTML 只会对元素的内部子元素进行形态转换，而不会影响目标元素

<body hx-ext="morph">

    <button hx-get="/example" hx-swap="morph">
        Morph My Outer HTML
    </button>

    <button hx-get="/example" hx-swap="morph:outerHTML">
        Morph My Outer HTML
    </button>
    
    <button hx-get="/example" hx-swap="morph:innerHTML">
        Morph My Inner HTML
    </button>

</body>