i saw this code and i took a screenshot and tried it but it didnt work
is this even a thing or not ?

enter image description here

推荐答案

当动画属性(如animatewhileHover)定义为字符串(即VARIANT)时,默认情况下它的值会‘传播’给子对象.因此,您可以在子对象上定义variants,在父对象上定义whileHover,并且当其父对象悬停时,取景器运动将对子对象设置动画.你可以在framer motion documentation中找到更多(附有例子).

因此,例如,如果你想在section悬停时设置h2的动画,你可以这样做:

const variants = {
    hover: { scale: 1.2 },
};

const Example = () => {
    return (<motion.section whileHover="hover">
        <motion.h2 variants={variants}>Title...</motion.h2>
        <motion.div>Lorem ipsum dolor sit amet</motion.div>
    </motion.section>);
};

Reactjs相关问答推荐

react-hook-form问题:为什么getValues不返回大多数当前值?

Reaction Native:在初始获取后,Reducer变为未定义

Npm运行构建`在Next.js 14中不起作用

useTranslation不会在languageChanged上重新呈现组件

导致useState中断的中断模式

使用REACT-RUTER-V6和ZUSTANDreact 中的身份验证

在Reaction中管理多个状态

自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

关于forwardRef,我可以';我不理解第二个用例

React-dom 的钩子调用无效.我能做些什么?

React - 如何重定向页面以显示数据修改?

React 应用程序可以嵌入到 PowerPoint 中吗?

在 Nextjs13 应用程序目录中呈现从 supabase 获取的数据

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子?

使用 Vite 的 React 中的路由无法正常工作(构建中)

无法读取未定义的react native 的属性参数

如何从其他组件访问 useQuery refetch 方法?

调用 Jest 和服务方法的问题

使用 yarn 编译 protobuf js 时出现错误pbjs: command not found