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 回答