请在2024年Clojure现状调查!中分享您的想法。

欢迎!有关如何操作的更多信息,请参阅关于页面。

+1
ClojureScript

我无法找到任何简单的方法在ClojureScript中使用reagent创建元素过渡效果。

3个答案

+1

这并没有确切回答你的问题,但过渡效果在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之类的伪元素。

如果你真的需要动画效果,我帮不上忙。很抱歉浪费了您的时间。

+1

嗨,
如果您使用shadow-cljs与reagent一起使用,
您可以使用framer-motion(react-pose的继任者)
它非常强大且易于使用!

0

关于reagent有一本Apress的书籍(...我只看了描述...所以...不清楚它是否有帮助...)

https://www.amazon.com/Reactive-ClojureScript-Recipes-Functional-Programming/dp/1484230086

...