2024 Clojure状态调查!中分享您的想法。

欢迎!请参阅关于页面以获取更多关于这是如何工作的信息。

+1
cl ClojureScript

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

3 个回答

+1
clartaq

这并不完全回答您的问题,但 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 的伪元素。

如果您确实需要一个动画,我帮不上忙。很抱歉浪费了您的时间。

+1

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

0

关于 reagent 有一本 Apress 的书(...我只看了简介...所以不知道是否有帮助...)

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

...