React/Framer Motion {variants} 不起作用？

Question

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

我可以使用初始/动画/退出创建动作，但由于某种原因我无法让变体工作？所以我有这个例子：

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

如果我刷新页面（AnimatePresence 初始值是 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'>
  >

我对没有正确阅读文档感到遗憾。也许这对任何人都有帮助