代码之家 › 专栏 › 技术社区 › DooMGuy096

简单的Framer运动动画在NextJS项目中不起作用

framer-motion material-ui next.js reactjs

DooMGuy096 · 技术社区 · 3 年前

在我的 nextjs 项目[v13,pages directory]我试图添加 following animation 我的英雄组件,但出于某种原因,我得到了一个静态的表情符号,而不是一个挥手的动画。

这是我的 WavingHand 组成部分

import { motion } from 'framer-motion';

export default function WavingHand() {
  return (
    <motion.div
      style={{
        marginBottom: '-20px',
        marginRight: '-45px',
        paddingBottom: '20px',
        paddingRight: '45px',
        display: 'inline-block',
      }}
      animate={{ rotate: 20 }}
      transition={{
        yoyo: Infinity,
        from: 0,
        duration: 0.2,
        ease: 'easeInOut',
        type: 'tween',
      }}
    >
      ð
    </motion.div>
  );
}

这是我在中的代码块 Hero 我调用的组件 挥手 然后在中调用的组件 index.js 主页

<Typography
  component={motion.h1}
  variant="h1"
  sx={{
    fontSize: { md: '4rem', sm: '3rem', xs: '3rem' },
    textAlign: { xs: 'center', sm: 'initial' },
  }}
>
  Hello <WavingHand /> !
</Typography>;

还试着把整个包裹起来 Typography 中的元素 motion.div 包装,但它仍然不会动画,我哪里错了?

0 回复 | 直到 2 年前

Audwin Oyong Kuldeep Bora 2 年前

事实证明 yoyo:Infinity 在电流中不起作用 framer-motion 版本,以下代码有效:

<motion.div
  style={{
    marginBottom: "-20px",
    marginRight: "-45px",
    paddingBottom: "20px",
    paddingRight: "45px",
    display: "inline-block",
  }}
  animate={{ rotate: [0, 20, 0] }}
  transition={{
    duration: 1,
    ease: "easeInOut",
    repeat: Infinity,
    repeatDelay: 0,
  }}
ð
</motion.div>

Rajat Das 2 年前

好的,所以旋转需要在一个关键帧数组中,而且过渡属性应该在动画对象内部。

以下是工作片段:

export default function WavingHand() {
    return (
        <div
            style={{
                marginBottom: "-20px",
                marginRight: "-45px",
                paddingBottom: "20px",
                paddingRight: "45px",
                display: "inline-block",
            }}
            animate={{
                rotate: [0, 20, 0], // Add an array to specify the animation keyframes
                transition: {
                    yoyo: Infinity,
                    duration: 0.2,
                    ease: "easeInOut",
                    type: "tween",
                },
            }}
        >
            ð
        </div>
    );
}

以下是明细:

使用内联样式来定义动画特性。
animate属性是一个以旋转为阵列的对象,用于指定旋转的关键帧。
动画设置为无限yoyo,带有持续时间为0.2秒,并放松“easeInOut”。

希望它能有所帮助!

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前