Keep elements visible after first scroll using react-visibility-sensor

问题

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>

回答1:

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
        className={`example ${isVisible ? 'visible' : ''}`}
      >
        {children}
      </div>
    </VisibilitySensor>
  );
};

CSS

.example{
  ...
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.example.visible{
  opacity: 1;
  transform: translateY(0px);
}

Try to use className

回答2:

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/

来源：https://stackoverflow.com/questions/58436201/keep-elements-visible-after-first-scroll-using-react-visibility-sensor