0

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

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

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

如果我刷新页面（AnimatePresence 初始值为真，而不是假），它会起作用，我会得到一个从 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>

它只是行不通吗？我在这里错过了什么吗？我没有定义任何其他动作/父母或任何东西。它在使用内联代码时有效，但不适用于变体？

在此处输入图像描述

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

感谢您抽出宝贵的时间！

4

2 回答 2

2

所以看来我需要有一个父母有这些：

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

我不正确阅读文档很糟糕。也许这对任何人都有帮助

于 2020-11-18T23:20:17.060 回答
0

你必须像这样使用

<motion.span variants={letter} initial="initial" animate="animate">
  A
</motion.span>
于 2021-10-06T09:39:34.803 回答