1

我正在使用 framer-motion 库为 div mount 设置动画

这就是我所拥有的：

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

还有一个布尔显示我的组件？当我单击按钮时从 false 更改为 true （我正在使用 re-frame 来管理 boolean show-my-component？但在这里简化了代码）：

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

但是使用 :>div 时单击按钮时组件不会立即显示，尽管在使用常规 :div 时会立即显示，但在后一种情况下当然没有动画

使用 :> div 时，我必须重新聚焦或单击网页上的某个位置以显示我的组件

- 编辑 -

从 0 到 1 的不透明度动画是在点击时触发的，而不是在页面加载时触发的。该组件第一次没有被聚焦。当窗口重新聚焦并因此触发动画时，它会聚焦。Reagent 不会在页面加载时自动聚焦 framer motion motion.div 对象。在同样的情况下反应会。

Framer Motion 状态：

https://www.framer.com/api/motion/animation/#mount-animations "挂载动画

当组件挂载时，如果它们与 style 或 initial 中定义的值不同，它将自动为 animate 中的值设置动画。您可以将 initial prop 设置为 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