在HTMX中定居

Question

我试图以类似于https://htmx.org/examples/bulk-update/的方式使用CSS转换，以显示哪一行已被更新，但使用HTMX1.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或div时，服务器将再次返回上述HTML，但class="updated"将应用于所讨论的div。

我还有以下CSS：

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

.updated {
  border: 1px solid black;
}

我希望看到点击的div显示一个边框，也闪现绿色。然而，我观察到的是：

• I单击div A.
• div A显示边框，但不闪烁。
• i单击div B.
• div B显示边框，但div A
• 则显示边框，我单击的div则显示边框，但上一回合单击的div显示闪烁。

f 215

我猜想这与应用程序/删除htmx-settling类的时间有关，以及交换的内容获得新类的时间。我读过https://htmx.org/docs/#request-operations和https://htmx.org/docs/#css_transitions，但我看不出哪里出了问题。

Answer 1

在你的CSS中你需要transition，就像来自https://htmx.org/docs/#css_transitions

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