1

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

4

1 回答 1

0

您在 CSS 中需要的 AFIAK transition，例如来自https://htmx.org/docs/#css_transitions

.red {
  color: red;
  transition: all ease-in 1s ; <========= missing?
}
于 2021-04-22T08:08:28.867 回答