入驻HTMX

Question

我正在尝试以与https://htmx.org/examples/bulk-update/类似的方式使用CSS转换来显示更新了哪一行，但我无法让它在我的示例中工作使用 HTMX 1.3.3

相关的 HTML 是：

<div id="replace-me">
  <div id="A" hx-get="/A" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">A</div> 
  <div id="B" hx-get="/B" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">B</div>
</div>

当单击 div A 或 div B 时，服务器会再次返回上述 HTML，但会将

class="updated"

应用于相关 div。

我还有以下CSS：

.htmx-settling .updated {
  background: darkseagreen;
}

.updated {
  border: 1px solid black;
}

我希望看到单击的 div 显示边框并且闪烁绿色。然而我观察到的是：

• 我点击 div A。
• div A 显示边框 但不闪烁。
• 我点击 div B。
• div B 显示边框，但 div A 闪烁。
• 从此我点击的div显示边框，但上一回合点击的div却闪烁。

我猜这与应用/删除

htmx-settling

类的时间以及交换内容获得新类的时间有关。我已阅读 https://htmx.org/docs/#request-operations 和 https://htmx.org/docs/#css_transitions，但看不出我哪里出错了。

Answer 1

AFIAK，你的 CSS 中需要

transition

，就像来自 https://htmx.org/docs/#css_transitions

.red {
  color: red;
  transition: all ease-in 1s ; <========= missing?
}

Answer 2

TLDR；

不管你信不信，id 属性是问题的根源。删除 id，更新您的 css 以添加如下所示的过渡，它应该按照您期望的方式运行。

.htmx-settling>.updated {
  background: darkseagreen;
}

.updated {
  border: 1px solid black;
  background-color: transparent;
  transition: background-color 1s ease-in;
}

长版：

当交换节点中有一个与文档中现有节点匹配的 id 时，htmx 交换和结算模型的工作方式与您预期的略有不同。请参阅

此处了解文档的相关部分。

不幸的是，在这种情况下，这意味着“更新的”类只有在节点确定后才会添加，此时 css 选择器就没用了。您可以向 hx-swap 添加稳定延迟以查看其实际情况。