reactjs - 在元素可见之前反应 useInView 触发器

Question

我正在 React 中构建滚动触发动画，但是某些元素在它们出现在视图中之前就被触发了。为此，我构建了一个用于触发的小组件：

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

export const useScroll = (treshhold = .2) => {
    const controls = useAnimation();
    const [element, view] = useInView({ threshold: treshhold, triggerOnce: true });
    if (view) {
        controls.start('show');
    } else {
        controls.start('hidden');
    }
    return [element, controls];
}

为了更好地说明，我在这里画了草图：

黑框代表视口。有一个英雄部分，在页面加载时也会动画（黑框中的红色部分）。

在使用 scrollTriger 控件的下一部分中，元素已经被触发并且大致对应于视口高度。（视口下的绿框）

下面的蓝框与绿框中的元素相同，但它们一进入视口就会被触发。（期望的行为）蓝色和绿色框架具有相同的父级，并且没有进一步的区别。

在动画中，元素仅缩放，即高度不移动。

我找不到任何理由说明它的行为方式。

标签： reactjsframer-motionreact-intersection-observer