reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
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?