这并没有确切回答你的问题,但过渡效果在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相似语法来处理如hover之类的伪元素。
如果你真的需要动画效果,我帮不上忙。很抱歉浪费了您的时间。