React/Framer Motion {variants}不工作？

Question

所以我开始在React中使用Framer Motion，它真的很棒。

我可以用initial/animate/exit创建动作，但由于某些原因我不能让变体工作？所以我有这个例子：

<motion.span initial={{y:300}} animate={{y:0}} exit={{y: 300}} transition={transition} >A</motion.span>

如果我刷新页面(AnimatePresence initial为true，而不是false)，它可以工作，我得到一个字母，它从y:300移动到y:0，并定义了一个转换。

​

​

但是如果我想将其应用于多个字母，那么将其转换为如下所示的变体：

import React, { useEffect, useState } from "react";
import { motion, useViewportScroll, useTransform } from "framer-motion";
import { Link } from "react-router-dom";
import Scrollbar from 'react-smooth-scrollbar';
import scrolldown from '../images/scrolldown.svg';
import work1 from '../images/p1.png';
import work2 from '../images/p3.png';
import work3 from '../images/p2.png';

const transition = { duration: 1.7, ease: [0.43, 0.13, 0.23, 0.96] };


const letter = {
  initial: {
    y: 300,
  },
  animate: {
    y: 0,
    transition: { duration: 1, ...transition },
  },
};

const Home = () => (

然后像这样使用它：

<motion.span variants={letter}>A</motion.span>

它就是不起作用吗？我是不是漏掉了什么？我没有定义任何其他运动/父对象或其他任何东西。当使用内联代码，而不是变体时，它可以工作吗？

​

​

使用变体时，字母在刷新/页面更改时不会移动吗？

谢谢大家抽出时间来！

Answer 1

因此，我似乎需要有一个拥有这些设置的父母：

<motion.div className="site-hero"
  initial='initial'
  animate='animate'
  exit='exit'>
  >

没有正确阅读文档是我的错。也许这对任何人都有帮助

Answer 2

你必须像这样使用

<motion.span variants={letter} initial="initial" animate="animate">
  A
</motion.span>