I'm using the framer-motion library to animate a div mount
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])
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
when using :>div, I have to re-focus or click somewhere on the webpage
For my-component to show
How do I fix this issue?