reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Spaceman 2020-05-27T03:25:29.021900Z

How does one add an animation upon an element entering the dom?  like the

ReactCSSTransitionGroup
in react?

Lucy Wang 2020-05-27T11:25:44.022300Z

Why not just use ReactCSSTransitionGroup then? Or you can simply call setTimeout in some hooks to add a new class to the component node (obtained from useRef) and define transitions rules on the new class

2020-05-28T09:04:01.028800Z

framer motion is easy to use and very powerful

2020-05-28T09:06:05.029400Z

(ns app.motion
    (:require
     [framer-motion :refer (motion MagicMotion  AnimateSharedLayout AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion]
     [cljs-bean.core :refer [bean ->clj ->js]]))

  (def div
    (.-div motion))

  (def span
    (.-span motion))

  (def li
    (.-li motion))

  (def img
    (.-img motion))

  (def button
    (.-button motion))

  (def input
    (.-input motion))

  (def textarea
    (.-textarea motion))

  (def label
    (.-label motion))

  (def transform #(motion/transform (->js %1) (->js %2) (->js %3)))
  (def animate-presence AnimatePresence)

2020-05-28T09:06:46.029600Z

(defn my-component
  []
  [:> motion/animate-presence
   [:> motion/div
     {:key :my-component
       :class [:my-component (<class styles/my-component)]
       :variants {:initial {:opacity 0}
                  :animate {:opacity 1}
                  :exit {:opacity 0}}
       :initial :initial
       :animate :animate
       :exit :exit}
    "My component"]])

2020-05-28T09:07:01.029800Z

You could do some amazing animations with it

Spaceman 2020-05-28T14:22:41.030300Z

@ouvasam that gives me

--------------------------------------------------------------------------------
  12 |     [:> motion/animate-presence
  13 |      [:> motion/div
  14 |       {:key :my-component
  15 |        :class [:my-component (<class styles/my-component)]
-------------------------------------^------------------------------------------
 Use of undeclared Var vendo.cart/<class
--------------------------------------------------------------------------------
  16 |        :variants {:initial {:opacity 0}
  17 |                   :animate {:opacity 1}
  18 |                   :exit {:opacity 0}}
  19 |        :initial :initial
-----------------------------------------------------------------------

2020-05-28T14:23:36.031200Z

Yes you can remove (<class ...)

2020-05-28T14:24:18.031600Z

It is roosta/herb

Spaceman 2020-05-28T14:32:11.031800Z

I have the following now:

[:&gt; motion/animate-presence
     [:&gt; motion/div
      {:key :my-component
       :class [:my-component]
       :variants {:initial {:opacity 0}
                  :animate {:opacity 1}
                  :exit {:opacity 0}}
       :initial :initial
       :animate :animate
       :exit :exit}
      "My component"]]
And that gives in the console: react-dom.development.js:24037 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of vendo.cart.cart`.` at createFiberFromTypeAndProps (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:504:389>) at createFiberFromElement (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:505:255>) at eval (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:197:268>) at reconcileChildren (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:244:90>) at finishClassComponent (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:269:433>) at updateClassComponent (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:267:61>) at beginWork$1 (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:312:88>) at HTMLUnknownElement.callCallback (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:527:204>) at Object.invokeGuardedCallbackImpl (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:529:430>) at invokeGuardedCallback (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:5:463>)

Spaceman 2020-05-28T14:34:14.032Z

why would that be?

Spaceman 2020-05-28T14:45:30.032200Z

would you please share a self-contained, working example?

Spaceman 2020-05-28T15:01:26.032400Z

@ouvasam?

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))
[:&gt; 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

2020-06-02T13:15:21.062300Z

Hi @pshar10 sorry i was off

2020-06-02T13:15:49.062500Z

Here a sample of code that works and show how to. use animate-presence

(defn my-comp
  []
  (r/with-let
   [clicked (r/atom false)]
   [:&lt;&gt;
    [:div {:on-click #(swap! clicked not)}
     "click me"]
    [:&gt; motion/animate-presence
     (if @clicked
       [:&gt; 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"])]]))

2020-06-02T13:16:23.062700Z

The key part is important and should be. different for each componentthat use motion

2020-06-02T13:27:11.062900Z

Here is the same example without if and with a different key based on an atom

2020-06-02T13:27:32.063100Z

(defn my-comp
  []
  (r/with-let
   [clicked (r/atom false)]
   [:&lt;&gt;
    [:div {:on-click #(swap! clicked not)}
     "click me"]
    [:&gt; motion/animate-presence
     [:&gt; 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)]]]))

2020-06-02T13:27:50.063300Z

r/with-let is reagent/with-let

Spaceman 2020-05-27T03:25:36.022100Z

https://reactjs.org/docs/animation.html

Lucy Wang 2020-05-27T11:25:44.022300Z

Why not just use ReactCSSTransitionGroup then? Or you can simply call setTimeout in some hooks to add a new class to the component node (obtained from useRef) and define transitions rules on the new class