next.js whileFocus仅适用于< motion.input/>

kyvafyod 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(70)

我正在尝试使用Framer Motion的whileFocus来更改项目的比例，同时项目处于焦点中。当我使用Tab键聚焦时，它工作得很好。但是，只有当我使用<motion.input/>元素时，焦点才能通过单击来工作，而不是其他元素，如<motion.div/>或<motion.button/>。
下面是一个包含两个元素的示例组件，它适用于input元素，但不适用于div元素：

const MyMotionComponent = () => {
  return (
    <>
      {/*whileFocus works after clicking on this input element*/}
      <motion.input
        tabIndex={0}
        className="absolute cursor-pointer bg-blue-300"
        style={{ width: 100, height: 100, borderRadius: 50, x: 400, y: 200 }}
        whileFocus={{ scale: 2 }}
      />
      {/*whileFocus does not work after clicking on this div element*/}
      <motion.div
        tabIndex={0}
        className="absolute cursor-pointer bg-amber-300"
        style={{ width: 100, height: 100, borderRadius: 50, x: 200, y: 200 }}
        whileFocus={{ scale: 2 }}
      />
    </>
  );
};

字符串
有谁知道如何让<motion.div/>这样的元素或其他允许子元素的元素运行起来吗？

next.js

来源：https://stackoverflow.com/questions/76788921/whilefocus-only-works-for-motion-input

1条答案

按热度按时间

zi8p0yeb1#

可能的解决方案

将contentEditable={true}添加到<motion.div/>中：

const MyMotionComponent = () => {
  return (
      <motion.div
        ...
        whileFocus={{ scale: 2 }}
        contentEditable={true}
      />
  );
};

字符串

解决方案说明

我遇到的问题源于：focus-visible css伪类，Frameer Motion使用它来确定一个元素是否处于焦点中。<motion.input/>和<input/>元素默认使用：focus-visible。因此，效果如预期的那样起作用。
但是，为了让它在其他一些元素（例如<motion.div/>和<div/>）上工作，元素可能需要将contenteditable/contentEditable属性设置为true。
完整示例元素：

const MyMotionComponent = () => {
  return (
      <motion.div
        tabIndex={0}
        className="absolute cursor-pointer bg-amber-300"
        style={{width: 100, height: 100, borderRadius: 50, x: 200, y: 200}}
        whileFocus={{ scale: 2 }}
        contentEditable={true}
      />
  );
};

型

赞(0）回复(0）举报 2023-08-04

我来回答

next.js whileFocus仅适用于< motion.input/>

1条答案

可能的解决方案

解决方案说明

相关问题

热门标签

最新问答