在 Framer Motion 标签、动画或初始道具中应用类

Question

如何使用 Framer Motion 标签，并在

animate

和

initial

属性中，应用一个类。 就像这样。

<motion.div
  initial={{ className: 'hidden' }}
  animate={{ className: 'visible' }}
>
  <div>yo</div>
</motion.div>

我必须使用类，就像我使用tailwindcss一样。

我期望并希望有一种方法可以做到这一点，就像我上面展示的示例一样，只需将其放入渲染的 HTML 标签中

style="class-name:{class_name}"

，它绝对不会执行任何操作。

提前致谢。

Answer 1

如果您愿意使用纯 CSS 而不是 tailwind，有一个解决方法。

如果将

motion.div

放置在您知道的类的另一个 div 中，则可以使用

>

选择器更改

motion.div

的 CSS 属性

示例：

.class > div {
    cursor:pointer;
}

Answer 2

您可以将 vanilla js 与事件一起使用

onAnimationStart()

和

onAnimationComplate()

然后做你的逻辑。参考资料https://www.framer.com/docs/component/###onanimationstart

Answer 3

如果您只想控制可见性，您可以使用 css 属性，例如

<motion.div
  initial={{ display: "none" }}
  animate={{ display: "block" }}
>
  <div>yo</div>
</motion.div>

但是，您可以使用回调函数和 javascript 选择器做更多事情，如 @Arfan 提到的：

  function onStart() {
    document.getElementById("target")?.classList.add("visible");
    document.getElementById("target")?.classList.remove("hidden");
  }
  function onEnd() {
    document.getElementById("target")?.classList.remove("visible");
    document.getElementById("target")?.classList.add("hidden");
  }
...
<motion.div
  initial="rest"
  animate="anim"
  onAnimationStart={onStart}
  onAnimationComplate={onEnd}
  id="target"
>
  <div>yo</div>
</motion.div>