Framer animation 使用 React Intersection Observer。 需要多個動畫但只得到一個

Question

我正在嘗試使用 Framer Motion 和react-intersection-observer package 將相同的 animation 分配給一個組件的多個實例

import { useEffect, useRef, useCallback } from "react";

import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";


const levels = [
    {
        title: "GROUP LESSONS",
        description:
            "Lorem ipsum",
    },
    {
        title: "WORKSHOPS",
        description:
            "Lorem ipsum",
    },

];

const container = {
    show: {
        transition: {
            staggerChildren: 0.2,
        },
    },
};

const item = {
    hidden: { opacity: 0, x: 200 },
    show: {
        opacity: 1,
        x: 0,
        transition: {
            ease: [0.6, 0.01, -0.05, 0.95],
            duration: 1.6,
        },
    },
};



const Levels = () => {
        const animation = useAnimation();
        const [levelRef, inView] = useInView({
        triggerOnce: true,
     });

   useEffect(() => {
        if (inView) {
        animation.start("show");
      }
   }, [animation, inView]);


    return (
        <LevelsContainer>
            {levels.map((level, index) => {
                return (
                    <LevelsWrapper
                        key={index}
                        ref={levelRef}
                        animate={animation}
                        initial="hidden"
                        variants={container}
                    >
                        <Level variants={item}>
                            <Title>{level.title}</Title>
                            <Description>{level.description}</Description>
                        </Level>
                    </LevelsWrapper>
                );
            })}
        </LevelsContainer>
    );
};

這導致 animation 僅在滾動到最后一個 LevelWrapper 組件時加載。 然后將“inView”設置為 true，所有組件同時進行動畫處理。 在 react-intersection-observer package 文檔中，有一些關於在單個 useCallback 中包裝多個 ref 分配的信息，所以我試過了：

const animation = useAnimation();
    const ref = useRef();
    const [levelRef, inView] = useInView({
        triggerOnce: true,
    });

    const setRefs = useCallback(
        (node) => {
            ref.current = node;
            levelRef(node);
        },
        [levelRef]
    );

    useEffect(() => {
        if (inView) {
            animation.start("show");
        }
    }, [animation, inView]);

    return (
        <LevelsContainer>
            {levels.map((level, index) => {
                return (
                    <LevelsWrapper
                        key={index}
                        ref={setRefs}
                        animate={animation}
                        initial="hidden"
                        variants={container}
                    >
                        <Level variants={item}>
                            <Title>{level.title}</Title>
                            <Description>{level.description}</Description>
                        </Level>
                    </LevelsWrapper>
                );
            })}
        </LevelsContainer>
    );

但是動畫仍然不會針對每個 LevelWrapper 組件單獨觸發。 發生了什么？

Answer 1

不知道為什么問題中的代碼不起作用，但我發現即使不使用 useEffect、useRef、useCallback、useAnimation 或 useInView 也可以達到最終結果。

在 Framer Motion 文檔中：

Motion 使用一組簡單而強大的 UI 手勢識別器擴展了 React 提供的一組基本事件偵聽器。

目前支持hover、點擊、平移、視口和拖動手勢檢測。 每個手勢都有一系列事件偵聽器，您可以將它們附加到動作組件。

然后應用此處解釋的內容： https：//www.framer.com/docs/gestures/#viewport-options

            <LevelsWrapper
                key={index}
                initial="hidden"
                whileInView="show"
                variants={container}
                viewport={{ once: true, amount: 0.8, margin: "200px" }}
            >