如何在同一个 React 组件中使用多个 'useInView' 钩子?
How to use multiple 'useInView' hooks in the same react component?
我正在做一个 React 项目,并尝试在 div 出现在视图中时制作动画并显示它们。我正在使用 'react-intersection-observer' 中的 useInView 挂钩来确定 div 是否在视图中,然后启动动画以使 div 可见。
但是,当我在同一个组件中有两个 div 时,即第一个 div 出现在视图中时,这不能正常工作 - 动画并显示第一个 div,当第二个 div 在视图中时您进一步滚动 - 动画并显示第二个 div.
如有任何帮助,我们将不胜感激。
代码如下:
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
function Container(props) {
const { ref, inView } = useInView({
threshold: 1
});
const { ref1, inView1 } = useInView({
threshold: 1
});
return (
<div>
<motion.div ref={ref}>
<motion.h1
initial={{ x: -700, opacity: 0 }}
animate={ inView ? { x: 0, opacity: 1 } : ''}
transition={{ duration: .75 }} >
Sample Title 1
</motion.h1>
<motion.p
initial={{ x: 400, opacity: 0 }}
animate={ inView ? { x: 0, opacity: 1 } : ''}
transition={{ delay: 0.8, duration: 1, ease: "easeOut" }} >
Sample Description 1
</motion.p>
</motion.div>
<motion.div ref={ref1}>
<motion.h1
initial={{ opacity: 0 }}
animate={ inView1 ? { opacity: 1 } : ''}
transition={{ duration: .75 }} >
Sample Title 2
</motion.h1>
<motion.p
initial={{ x: 400, opacity: 0 }}
animate={ inView1 ? { x: 0, opacity: 1 } : ''}
transition={{ delay: 0.8, duration: 1, ease: "easeOut" }} >
Sample Description 2
</motion.p>
</motion.div>
</div>
);
}
export default Container;
我猜你应该正确地将动画与相交事件联系起来
- 动画控制:https://www.framer.com/api/motion/utilities/#animate
InVew
来自 'react-intersection-observer' 和
const from = useMotionValue(0);
useEffect(
() => {
if (inView) {
const controls = animate(x, 100, {
type: "spring",
stiffness: 2000,
})
return controls.stop
}
},
[inView]
}
在他们的文档中,它说您可以使用多个变量进行数组析构,而不是您在自己的情况下使用的对象析构。
所以你应该这样做。
const [ref, inView ] = useInView()
const [ref2, inView2 ] = useInView()
我正在做一个 React 项目,并尝试在 div 出现在视图中时制作动画并显示它们。我正在使用 'react-intersection-observer' 中的 useInView 挂钩来确定 div 是否在视图中,然后启动动画以使 div 可见。
但是,当我在同一个组件中有两个 div 时,即第一个 div 出现在视图中时,这不能正常工作 - 动画并显示第一个 div,当第二个 div 在视图中时您进一步滚动 - 动画并显示第二个 div.
如有任何帮助,我们将不胜感激。
代码如下:
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
function Container(props) {
const { ref, inView } = useInView({
threshold: 1
});
const { ref1, inView1 } = useInView({
threshold: 1
});
return (
<div>
<motion.div ref={ref}>
<motion.h1
initial={{ x: -700, opacity: 0 }}
animate={ inView ? { x: 0, opacity: 1 } : ''}
transition={{ duration: .75 }} >
Sample Title 1
</motion.h1>
<motion.p
initial={{ x: 400, opacity: 0 }}
animate={ inView ? { x: 0, opacity: 1 } : ''}
transition={{ delay: 0.8, duration: 1, ease: "easeOut" }} >
Sample Description 1
</motion.p>
</motion.div>
<motion.div ref={ref1}>
<motion.h1
initial={{ opacity: 0 }}
animate={ inView1 ? { opacity: 1 } : ''}
transition={{ duration: .75 }} >
Sample Title 2
</motion.h1>
<motion.p
initial={{ x: 400, opacity: 0 }}
animate={ inView1 ? { x: 0, opacity: 1 } : ''}
transition={{ delay: 0.8, duration: 1, ease: "easeOut" }} >
Sample Description 2
</motion.p>
</motion.div>
</div>
);
}
export default Container;
我猜你应该正确地将动画与相交事件联系起来
- 动画控制:https://www.framer.com/api/motion/utilities/#animate
InVew
来自 'react-intersection-observer' 和
const from = useMotionValue(0);
useEffect(
() => {
if (inView) {
const controls = animate(x, 100, {
type: "spring",
stiffness: 2000,
})
return controls.stop
}
},
[inView]
}
在他们的文档中,它说您可以使用多个变量进行数组析构,而不是您在自己的情况下使用的对象析构。
所以你应该这样做。
const [ref, inView ] = useInView()
const [ref2, inView2 ] = useInView()