htmx Idiomorph 扩展

Idiomorph 是 htmx 创建者创建的一种 DOM 变形算法。DOM 变形是一种将现有 DOM 树“变形”为另一棵树的过程，其方式是尽可能多地重复使用现有 DOM 的节点。通过在从一棵树切换到另一棵树时保留节点，你可以在两种状态之间呈现更平滑的过渡。

你可以通过包含 idiomorph 扩展来使用 idiomorph 变形算法作为交换策略。

安装

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

用法

一旦你引用了 idiomorph 扩展，你就可以使用主体上的名称 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>