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-like语法来处理如hover这样的伪元素。

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

+1
by

您好,
如果您使用shadow-cljs和reagent,
您可以使用framer-motion(react-pose的继任者)
它非常强大,非常简单易用!

0
by

关于reagent,有一本apress出版的书(...我只看了描述,所以...不知道是否能有所帮助...)

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

...