使用 react-visibility-sensor 在第一次滚动后保持元素可见 [英] Keep elements visible after first scroll using react-visibility-sensor

问题描述

使用 react-visibility-sensor 我创建了一个更高的组件来为我的项目部分滚动动画.

我在尝试使其仅在第一个滚动条上工作时遇到问题.目前这些部分出现和消失.

任何帮助将不胜感激.干杯！

从 'react-visibility-sensor' 导入 VisibilitySensor；export const SlideUp = ({ children }) =>{const [isVisible, setVisibility] = useState(false);const onChange = 可见性 =>{设置可见性(可见性)；};返回 (<可见性传感器部分可见性偏移={{ 顶部:200 }}onChange={onChange}>
</VisibilitySensor>);};```- 使用示例:<上滑><部分/></SlideUp>

解决方案

我的解决方案是将 React Pose 与 React Visibility 混合使用.

可见性触发 React Pose 中只发生一次的动画.动画依赖于姿势而不是可见性.

从 'react-visibility-sensor' 导入 VisibilitySensor；从反应姿势"​​导入；const PoseDiv = posed.div({进入: {y: 0,不透明度:1，过渡: {持续时间:300，轻松:'easeIn'，},},退出:{y:20，不透明度:0}，});export const SlideUp = ({ children }) =>{const [isVisible, setVisibility] = useState(false);const [输入，设置输入] = useState(false);const onChange = 可见性 =>{设置可见性(可见性)；};useEffect(() => {如果(可见){设置输入(真)；}}, [isVisible]);返回 (<><可见性传感器部分可见性偏移={{ 顶部:100 }}onChange={onChange}><PoseDiv 姿势={输入?'进入' : '退出'}>{children}</PoseDiv></VisibilitySensor></>);};

我希望它可以帮助其他人.干杯！

PS:由于 React Pose 现已弃用，因此需要更新此解决方案.

https://www.framer.com/api/motion/从姿势迁移/

Using react-visibility-sensor I've created a higher component to animate the sections of my project on scroll.

I'm having problems trying to make it work only on the first scroll. At the moment the sections appear and disappear.

Any help would be really appreciated. Cheers!

import VisibilitySensor from 'react-visibility-sensor';

export const SlideUp = ({ children }) => {
  const [isVisible, setVisibility] = useState(false);

  const onChange = visiblity => {
    setVisibility(visiblity);
  };

  return (
    <VisibilitySensor
      partialVisibility
      offset={{ top: 200 }}
      onChange={onChange}
    >
      <div
        style={{
          transition: `opacity ${0.5}s ease, transform ${0.5}s ease`,
          opacity: isVisible ? 1 : 0,
          transform: isVisible ? `translateY(${0}px)` : `translateY(${20}px)`,
        }}
      >
        {children}
      </div>
    </VisibilitySensor>
  );
};```

- use example:

<SlideUp>
  <Section />
</SlideUp>

解决方案

My solution was to mix React Pose with React Visibility.

The visibility triggers the animation in React Pose which happens only once. The animation relies on Pose and not on visibility.

import VisibilitySensor from 'react-visibility-sensor';
import posed from 'react-pose';

const PoseDiv = posed.div({
  enter: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 300,
      ease: 'easeIn',
    },
  },
  exit: { y: 20, opacity: 0 },
});

export const SlideUp = ({ children }) => {
  const [isVisible, setVisibility] = useState(false);
  const [entered, setEntered] = useState(false);

  const onChange = visiblity => {
    setVisibility(visiblity);
  };

  useEffect(() => {
    if (isVisible) {
      setEntered(true);
    }
  }, [isVisible]);

  return (
    <>
      <VisibilitySensor
        partialVisibility
        offset={{ top: 100 }}
        onChange={onChange}
      >
        <PoseDiv pose={entered ? 'enter' : 'exit'}>{children}</PoseDiv>
      </VisibilitySensor>
    </>
  );
}; 

I hope it helps somebody else. Cheers!

PS: this solution needs to be updated due to the fact that React Pose is now deprecated.

https://www.framer.com/api/motion/migrate-from-pose/

这篇关于使用 react-visibility-sensor 在第一次滚动后保持元素可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！