1

framer-motion ライブラリを使用して div マウントをアニメーション化しています

これは私が持っているものです:

(: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"])

そして、ブール値のshow-my-component? ボタンをクリックすると false から true に変更されます (ブール値の show-my-component を管理するために re-frame を使用していますが、ここではコードを簡略化しています):

[:button {:on-click (change-show-my-component-boolean-to-true)}]
(if show-my-component? [my-component])

ただし、:>div を使用している場合はボタンをクリックしてもコンポーネントはすぐには表示されませんが、通常の :div を使用している場合は表示されますが、後者の場合はもちろんアニメーションはありません。

:> div を使用する場合、my-component を表示するには、Web ページのどこかを再度フォーカスするかクリックする必要があります。

- 編集 -

0 から 1 までの不透明度アニメーションは、ページの読み込み時ではなく、クリック時にトリガーされます。コンポーネントは初めてフォーカスされていません。ウィンドウが再フォーカスされるとフォーカスされ、アニメーションがトリガーされます。Reagent は、ページの読み込み時にフレーマー モーションの motion.div オブジェクトを自動的にフォーカスしません。同じ状況で反応します。

Framer Motion の状態:

https://www.framer.com/api/motion/animation/#mount-animations "マウントアニメーション

コンポーネントがマウントされると、スタイルまたはイニシャルで定義された値と異なる場合、animate の値に自動的にアニメーション化されます。初期プロパティを false に設定して、animate の値をコンポーネントのマウント状態として使用し、マウント アニメーションを無効にすることができます。

<motion.div animate={{ x: 100 }} initial={false} /> これは、サーバー側のレンダリングでも機能します。"

コンポーネントは次のようにマウントされます。

<div class="flex flex-col items-center border-5" style="opacity: 0;"></div>

不透明度は 0 です。マウントされた div は :initial に固定されています。

- 編集 -

これらを :> div マップに追加してクリックをシミュレートすると、アニメーションはトリガーされません。

{:ref simulate-click
         :on-click #(prn "element clicked!")}

シミュレートクリックは次のとおりです。

(defn simulate-click [e]
  (prn "event is " e)
  (-> e .click)
  )
4

0 に答える 0