这并不完全回答您的问题,但 CSS (我不常用 CSS 动画,所以无法发表评论) 中的过渡效果非常容易实现。
以下是从最近的一个项目中提取的 CSS 代码片段,它在用户将鼠标悬停在元素上时实现过渡效果,即展开器控制中的 disclosure chevron。它使元素略微增大并变暗,是一种微妙但明显的改变。
基本元素
.tree-control--chevron-div {
...
font-size: 70%;
color: var(--chevron-color);
opacity: 0.9;
transition: opacity 0.3s, font-size 0.3s, color 0.3s ease-in-out;
...
}
悬停时的 CSS
.tree-control--chevron-div:hover {
font-size: 75%;
opacity: 1;
color: black;
}
元素的基本类指定了过渡应该如何进行。伪类的 CSS 指定了它应该过渡什么。
据我所知,在 Reagent 中实现这种方法的问题是没有方法可以指定伪元素的行为。
如果您不介意增加另一个依赖项,garden 是一个可为 Clojure 应用程序添加 CSS 的库。它的语法与 Hiccup 非常相似。还有 stylefy 用于 ClojureScript。这两个库都扩展了类似 Hiccup 的语法来处理类似 hover 的伪元素。
如果您确实需要一个动画,我帮不上忙。很抱歉浪费了您的时间。