0

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?

akond
  • 14,891
  • 4
  • 32
  • 54
lamp bottle
  • 481
  • 3
  • 12

0 Answers0