Welcome! Please see the About page for a little more info on how this works.

+1 vote
in ClojureScript by

I can not find any simple way to create element transition effects in ClojureScript with reagent.

3 Answers

+1 vote
by

This does not exactly answer your question, but transitions are very easy to do in CSS. (I don't use animations much, so can't comment.)

Here's a piece of CSS from a recent project that does a transition when the user hovers the mouse over an element, a disclosure chevron, in an outliner control. It makes the element a bit larger and darker, a subtle, but noticeable change.

The base element:

.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;
...
}

The CSS for the hover:

   .tree-control--chevron-div:hover {
    font-size: 75%;
    opacity: 1;
    color: black;
    }

The base class for the element specifies how the transition should happen. The CSS for the pseudo-class specifies what it should transition too.

The problem with doing this in Reagent, as far as I know, is that there is no way to specify the behavior of pseudo-elements.

If you don't mind adding another dependency, garden is a library for adding CSS to Clojure apps. It has a syntax very similar to Hiccup. There is also stylefy for ClojureScript. Both have slightly extended Hiccup-like syntax to handle pseudo-elements like hover.

If you really want an animation, I can't help. Sorry for wasting your time.

+1 vote
by

Hi,
If you use shadow-cljs with reagent,
You can use framer-motion (react-pose successor)
It is very powerful and very simple to use !

0 votes
by

there is an apress book about reagent ( ...i only read the description... so... no idea if it could help... )

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

...