reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
2020-05-29T07:15:18.034300Z

Do you use shadow-cljs ?

2020-05-29T08:20:36.034500Z

This should work with it If you use it i'll send a self-contained example

Spaceman 2020-05-29T20:30:24.034900Z

yeah I do

Spaceman 2020-05-29T23:23:10.035100Z

Yeah, for some reason, the :>div doesn't mount when I click the button, but only when I focus/refocus on the browser or click somewhere on the page.

Spaceman 2020-05-29T23:24:15.035300Z

here's the code:

(def div (.-div motion))
[:> div
     {
      :initial {:opacity 0}
      :animate {:opacity 1}
      :exit {:opacity 0}}
     [:div "Show Me"]]

Spaceman 2020-05-29T23:24:43.035500Z

also, wrapping the :>div with :>animate-presence (similarly defined), didn't change there result

Spaceman 2020-05-29T23:38:19.036Z

I'm using the framer-motion library to animate a div mount

Spaceman 2020-05-29T23:41:57.039300Z

This is what I have:

(:require [framer-motion :refer (motion MagicMotion AnimateSharedLayout AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion])
(def div (.-div motion))

(defn my-component []
    [:> div {
      :initial {:opacity 0}
      :animate {:opacity 1}
      :exit {:opacity 0}} 
"Show Me"])
And a boolean show-my-component? is changed from false to true when I click on a button (I'm using re-frame for managing the boolean show-my-component? but have simplified the code here):
[:button {:on-click (change-show-my-component-boolean-to-true)}]
(if show-my-component? [my-component])

Spaceman 2020-05-29T23:42:52.040400Z

But the component doesn't show immediately when clicking the button when using :>div, although it does when using a regular :div, but in the latter case of course there's no animation

Spaceman 2020-05-29T23:44:00.041100Z

when using :>div, I have to re-focus or click somewhere on the webpage

Spaceman 2020-05-29T23:44:12.041500Z

For my-component to show

Spaceman 2020-05-29T23:44:16.041700Z

How do I fix this issue?