@jcb that's still doesn't work unfortunately. The animation does work, but I still have to click twice or re-focus on the webpage for it to occur. What should I do to get help?
I have a question on reagent performance for large svg drawings (which contain 100s or 1000s of sub nodes): Is the vdom-dom rendering much slower than pure HTML in such cases?
@pshar10 at this point, probably worth putting together a simplified gist so people can test it themselves. Have you had plain css or React Css Transition Group animations working? they all work in basically the same way
Hi @pshar10 sorry i was off
Here a sample of code that works and show how to. use animate-presence
(defn my-comp
[]
(r/with-let
[clicked (r/atom false)]
[:<>
[:div {:on-click #(swap! clicked not)}
"click me"]
[:> motion/animate-presence
(if @clicked
[:> motion/div
{:key :my-comp
:class [:my-comp]
:variants {:initial {:opacity 0
:y 100
:x 0
:scale 1}
:animate {:opacity 1
:y 0
:scale 1}
:exit {:opacity 0
:x 100
:scale 0.2}}
:initial :initial
:animate :animate
:exit :exit}
"my-comp"])]]))
The key part is important and should be. different for each componentthat use motion
Here is the same example without if and with a different key based on an atom
(defn my-comp
[]
(r/with-let
[clicked (r/atom false)]
[:<>
[:div {:on-click #(swap! clicked not)}
"click me"]
[:> motion/animate-presence
[:> motion/div
{:key (str :my-comp @clicked)
:class [:my-comp]
:variants {:initial {:opacity 0
:y 100
:x 0
:scale 1}
:animate {:opacity 1
:y 0
:scale 1}
:exit {:opacity 0
:x 100
:scale 0.2}}
:initial :initial
:animate :animate
:exit :exit}
(str "my-comp" @clicked)]]]))
r/with-let is reagent/with-let