标签: transition

所以我开始在 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: …

如果您访问我的网站：http://warringah- Plastics.com.au/w Plastics，当您将鼠标悬停在主导航中的菜单项上时，您会看到指示箭头显示在其顶部。然后，当您在菜单上从左到右移动鼠标时，CSS 过渡非常平滑。但是，当您从右向左移动时，过渡会突然越过菜单项，看起来不太好。目前我正在将此 CSS 应用于 nav li 元素：

过渡：所有 0.5 秒缓入缓出 0 秒！重要；

我尝试过使用悬停 CSS 进行实验，但没有成功。提前致谢！

我想要您寻求帮助，因为我无法访问R.anim。到目前为止，我已经创建了一个新项目并想要使用， overridePendingTransition但是，一旦我键入了R.anim.所有建议的选项，即：attr，dimen ，可绘制，ID，布局，菜单，字符串，样式...

哪里可能有问题？

提前致谢

今天我找到了这个网站:http://skainteractive.com/agencia/

当我从一个页面更改为另一个页面时,这是一个简单的URL更改,刷新页面.但问题是,他们设法在我们查看的页面上创建一个好的效果,然后转到新页面.

我看了一下他们的源代码,但我无法知道他们是如何做到的.我知道有一些方法可以做到这一点,但我想知道他们是如何做到的.因为它看起来很好.

这是另一个很好地利用这种效果的例子:http: //www.casadacalcada.com/

他们怎么能这样做？