J'essaie de faire une simple animation de diapositives et de sorties en utilisant react-reveal. Voici mon extrait de code :

{glanceDataFetching ? null : (<HelperBtn onClick={() => toggleShowHelper()}>{ showHelper ?  (<span>&gt;</span>) : (<span>&lt;</span>)}</HelperBtn>)}
    <Slide right duration={2000} when={showHelper}>
      <InfoBlockContainer>
        <Infotext>
          <span className="mr-1">&#x1F6C8;</span>
          <span>For viewing cataract/retina status, report or for updating call status/visit status, click on the respective cell</span>
        </Infotext>
      </InfoBlockContainer>
      </Slide>

Ici, InfoBlockContainer est un composant stylisé avec les styles suivants :

display: inline-block;
width: 250px;
height: 65px;
border: 1px solid #36A2EB;
background-color: lightblue;
border-radius: 4px;
position: absolute;
bottom: 0;
right: 5px;
padding: 5px;

Et voici le résultat de l'animation que j'obtiens (ajouté intentionnellement une durée de 2 secondes pour montrer le problème):

Slide In Div

Comme on peut le voir, après avoir glissé, il se déplace un peu vers le bas selon le CSS et se place dans sa position correcte et de la même manière lorsqu'il glisse. Ce qui n'a pas l'air plus fluide du tout. Comment puis-je le réparer ? Ou lancer l'animation de div avec la position qu'elle est censée être ?

1
Bijay Singh 14 févr. 2020 à 12:32

1 réponse

Meilleure réponse

Très probablement, car InfoBlockContainer est positionné de manière absolue à 0 à partir du bas, lors du glissement vers l'intérieur et l'extérieur, cela crée un débordement sur le bloc conteneur. En conséquence, des barres de défilement sont produites. Lorsque InfoBlockContainer arrive, les barres de défilement sont supprimées afin qu'il se déplace un peu vers le bas.

Pour résoudre ce problème, je suggère d'ajouter overflow: hidden au bloc contenant positionné absolu le plus proche. Si tous les conteneurs du Slide ne sont pas en position absolue, ajoutez overflow: hidden au body.

Voici un échantillon. Si vous supprimez overflow: hidden de l'élément body, vous constaterez le même changement d'emplacement que prévu.

1
Fyodor 14 févr. 2020 à 10:07