問題タブ [framer-motion]

Styled Components と Framer Motion を一緒に使用して、スタイルとアニメーションを作成したいと考えています... SC または FM の変数を使用して、スタイルとアニメーションを作成できますか?

例は何ですか？

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

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

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

ただし、:>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} /> これは、サーバー側のレンダリングでも機能します。"

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

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

- 編集 -

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

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

I know that I can apply motion directly to element/HTMLtag like this:

But how can I apply it to this?

Without wrapping it inside another HTML element, like in React-Transition-Group library.

Framer API provides Frame component, but it acts like permanent additional HTML element with own styling, and it is messing my layout.