这并不完全回答你的问题,但CSS的过渡制作起来非常容易。(我不太使用动画,所以不能评论。)
以下是从一个最近的项目中提取的一段CSS代码,在用户将鼠标悬停在元素(一个大纲控制中的展开箭头)上时执行转场。它使元素稍微变大并变暗,这是一个微妙但显而易见的变化。
基本元素
.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-like语法来处理如hover这样的伪元素。
如果你真的需要动画,我就帮不了你了。很抱歉浪费你的时间。