0
votes

Gardez les éléments visibles après le premier défilement à l'aide du capteur de visibilité réactif

En utilisant le capteur de visibilité de réaction, j'ai créé un composant supérieur pour animer les sections de mon projet sur le scroll.

J'ai des problèmes pour essayer de le faire fonctionner uniquement sur le premier scroll. Pour le moment, les sections apparaissent et disparaissent.

Toute aide serait vraiment appréciée. Bravo!

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>

reactjs react-hooks scroll

1 commentaires

Je ne suis pas tout à fait sûr de ce que vous aimeriez faire et comment je peux créer un exemple pour vous, mais vous pouvez regarder dans ma réponse pour le post ReactJS: React CountUp visible une seule fois dans le capteur de visibilité . J'ai essayé d'expliquer comment vous pouvez gérer la visibilité avec le capteur de visibilité.

4 Réponses :

0
votes

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

1 commentaires

merci pour votre réponse, mais cela fonctionne comme avant. @zynkn

1
votes

Ma solution a été de mélanger React Pose avec React Visibility.

La visibilité déclenche l'animation dans React Pose qui ne se produit qu'une seule fois. L'animation repose sur Pose et non sur la visibilité.

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>
    </>
  );
};

J'espère que cela aide quelqu'un d'autre. Bravo!

PS: cette solution doit être mise à jour car React Pose est désormais obsolète.

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

0 commentaires

0
votes

Je pense que vous changez l'état de visibilité, pour garder l'interface utilisateur visible une fois affichée, ne changez pas l'état en invisible

changez simplement

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

en p >

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

0 commentaires

0
votes

C'est la solution que j'utilise. Utilisez simplement hasBeenVisible render prop au lieu de isVisible.

import React, { useState } from "react";
import VisibilitySensor from "react-visibility-sensor";

/**
 * VisibilitySensor does not implement some kind of funcionality to track first time
 * visibility. This component extends VisibilitySensor compoment to provide this
 * feature. Just use `hasBeenVisible` render prop instead of `isVisible`.
 * 
 * https://github.com/joshwnj/react-visibility-sensor/issues/117#issuecomment-686365798
 */
const AppearSensor = ({
  onChange,
  children,
  ...rest
}) => {
  const [hasBeenVisible, setHasBeenVisible] = useState(false);

  return (
    <VisibilitySensor {...rest} onChange={(isVisible) => {
      if (isVisible) setHasBeenVisible(true)
      if (onChange) onChange(isVisible)
    }}>
      {
        ({
          isVisible,
          ...restRenderProps
        }) => {
          return children({ isVisible, ...restRenderProps, hasBeenVisible })
        }
      }
    </VisibilitySensor>
  );
};

AppearSensor.propTypes = VisibilitySensor.propTypes
AppearSensor.defaultProps = VisibilitySensor.defaultProps

export default AppearSensor;

1 commentaires

Problème Github: github.com/joshwnj/react-visibility-sensor/issues/117