This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-05-27
Channels
- # admin-announcements (1)
- # announcements (1)
- # babashka (16)
- # beginners (222)
- # bristol-clojurians (6)
- # calva (13)
- # cestmeetup (5)
- # cider (19)
- # cljs-dev (2)
- # cljsrn (4)
- # clojure (65)
- # clojure-europe (31)
- # clojure-nl (1)
- # clojure-norway (1)
- # clojure-uk (33)
- # clojurescript (64)
- # community-development (5)
- # core-async (18)
- # cursive (15)
- # datomic (6)
- # devcards (1)
- # emacs (18)
- # figwheel-main (102)
- # fulcro (51)
- # graalvm (2)
- # helix (8)
- # instaparse (33)
- # jobs (8)
- # jobs-discuss (3)
- # leiningen (42)
- # off-topic (88)
- # pedestal (15)
- # re-frame (18)
- # reagent (26)
- # reitit (15)
- # rum (3)
- # shadow-cljs (119)
- # spacemacs (9)
- # sql (2)
- # tools-deps (7)
How does one add an animation upon an element entering the dom? like the
ReactCSSTransitionGroup
in react?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
(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)
(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"]])
@U0F7M1KA7 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
-----------------------------------------------------------------------
I have the following now:
[:> motion/animate-presence
[:> 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 ()
at createFiberFromElement ()
at eval ()
at reconcileChildren ()
at finishClassComponent ()
at updateClassComponent ()
at beginWork$1 ()
at HTMLUnknownElement.callCallback ()
at Object.invokeGuardedCallbackImpl ()
at invokeGuardedCallback ()
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.
here's the code:
(def div (.-div motion))
[:> div
{
:initial {:opacity 0}
:animate {:opacity 1}
:exit {:opacity 0}}
[:div "Show Me"]]
also, wrapping the :>div with :>animate-presence (similarly defined), didn't change there result
Hi @U010Z4Y1J4Q 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"])]]))
(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)]]]))