htmx - 定居在 HTMX
问题描述
我正在尝试以与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,但看不到我哪里出错了。
解决方案
您在 CSS 中需要的 AFIAK transition
,例如来自https://htmx.org/docs/#css_transitions
.red {
color: red;
transition: all ease-in 1s ; <========= missing?
}
推荐阅读
- java - 有没有办法修复这个无效的模块名称错误?
- pandas - 复制特定行并分离 str 列值 pandas
- python - Python 应用程序无法使用 Pygame (python3) 打开
- python - Python 谷歌新闻脚本
- mysql - GROUP BY 另一个已经用两个子查询分组的表
- javascript - Reactjs 记录器-js 下载
- sql - 没有交集表的多对多关系?
- drupal-8 - DDEV 似乎没有安装drupal(以前工作过)
- python - 如何使用 Selenium Webdriver 在 Chrome 中关闭下载弹出窗口?
- php - 通过两个字段查询以使用 PHP 在 Firebase 中登录