установка позиции div перед анимацией в реакции-показе - PullRequest
Новая
       52

установка позиции div перед анимацией в реакции-показе

1 голос
/ 14 февраля 2020

Я пытаюсь сделать простую анимацию слайдов и слайдов, используя ответную реакцию. Это мой фрагмент кода: 

{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>

Здесь InfoBlockContainer - это стилизованный компонент со следующими стилями: 

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;

И это результат анимации, который я получаю (Намеренно добавлена ​​длительность 2se c, чтобы показать случай):

Slide In Div

Как видно, после скольжения он немного опускается вниз согласно css и ставит себя в правильное положение и то же самое, когда выдвигается. Который не выглядит гладким на всех. Как я могу это исправить? Или начать анимацию div с позиции, которая должна быть?

1 Ответ

1 голос
/ 14 февраля 2020

Скорее всего, как InfoBlockContainer - это абсолютное позиционирование в 0 снизу, при скольжении внутрь и наружу это создает переполнение для содержащего блока. В результате создаются полосы прокрутки. Когда приходит InfoBlockContainer, полосы прокрутки удаляются, поэтому он немного смещается вниз.

Чтобы исправить, я предлагаю добавить overflow: hidden к ближайшему блоку с абсолютным позиционированием. Если все контейнеры Slide не имеют абсолютного позиционирования, добавьте overflow: hidden к body.

. Вот образец . Если вы удалите overflow: hidden из элемента body, вы увидите такое же изменение размещения, как и ожидали.

...