入驻 HTMX

编程问答 2022-05-12

问题描述

我正在尝试以与 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，但看不出哪里出错了。

解决方法

AFIAK 你的 CSS 需要 transition，比如 https://htmx.org/docs/#css_transitions

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