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

欢迎!请参阅关于页面以了解有关如何使用本服务的更多信息。

+1
ClojureScript

我找不到创建元素转场效果的简单方法。

3 个答案

+1

这并不是确切回答您的问题,但过渡效果在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-like语法来处理如hover之类的伪元素。

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

+1

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

0

关于reagent有一本apress的书籍(...我只看了描述... 所以... 没有主意这本书是否能帮到...)

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

...