标签: framer-motion

在使用Framer Motion API在我的网站上创建交互和动画时，我找不到如何使用它来在屏幕上显示某些内容时触发动画。

例如，这个 SVG 绘制正确，但 Framer 不会等待元素出现在视口上并在加载站点后立即触发它：

import React, { Component } from 'react'
import { motion } from "framer-motion";

class IsometricScreen extends Component {

    constructor() {
        super()
        this.icon = {
            hidden: { pathLength: 0 },
            visible: { pathLength: 1 }
        }
    }

    render() {
        return (
            <motion.svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 1000" className="svg-mobile">
                <motion.path
                    d="M418,988.93H82c-39.76,0-72-32.24-72-72V83.07c0-39.76,32.24-72,72-72h336c39.76,0,72,32.24,72,72v833.86
                    C490,956.69,457.76,988.93,418,988.93z"
                    variants={this.icon}
                    initial="hidden"
                    animate="visible"
                    transition={{
                        default: { duration: 2, ease: "easeInOut" }
                    }}
                />
            </motion.svg>
        )
    }
}

export default IsometricScreen …

我目前面临这个问题，尽管我的比例在悬停时触发，但我的动画拒绝工作。

我浏览了文档，但仍然无法弄清楚。我错过了什么？帮助！

这是我的代码和来自浏览器的警告：

            import { motion } from "framer-motion";

            <motion.div className="heart-overlay"

                whileHover={{
                    animate: {x: 500},
                    scale: 1.2,
                    transition: { ease: "easeOut", duration: 2 },
                }}>

                <div className="heart-top">
                    <Img className="heart-default" src={heart_default_top} />
                </div>
                <div className="heart-bot">
                    <Img className="heart-default" src={heart_default_bot} />
                </div>
            </motion.div>

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

我正在尝试创建一个动画，当用户向下滚动时隐藏菜单，当用户返回顶部时菜单出现。

一切正常，但是当我尝试赋予为钩子提供useScroll类型的scrollY属性时，问题就出现了。

这是我找不到实现该类型的方法的代码。

 const { scrollY } = useScroll();
 const [isScrolling, setScrolling] = useState<boolean>(false);

 const handleScroll = () => {
  if (scrollY?.current < scrollY?.prev) setScrolling(false);
  if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) setScrolling(true);
 };

useEffect(() => {
  return scrollY.onChange(() => handleScroll());
});