在 react-reveal 中设置动画前的 div 位置淡入动画答案

【问题标题】：setting div position before animation in react-reveal Fade in animation在 react-reveal 中设置动画前的 div 位置淡入动画
【发布时间】：2020-05-30 02:07:16
【问题描述】：

我正在尝试使用 react-reveal 制作一个简单的滑入和滑出动画。这是我的代码 sn-p：

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

这是我得到的动画结果（特意添加了 2 秒的持续时间以显示问题）：

可以看出，在它滑入后，它会根据 css 向下移动一点，并在滑出时将自身放置到正确的位置。这看起来一点也不顺畅。我该如何解决？还是从 div 应该在的位置开始动画？

【问题讨论】：

标签： css reactjs css-animations css-transitions

【解决方案1】：

很可能InfoBlockContainer 从底部绝对定位在 0 处，当滑入和滑出时，它会在包含块上产生溢出。结果产生了滚动条。当InfoBlockContainer 进来时，滚动条被移除，所以它向下移动了一点。

要修复，我建议将overflow: hidden 添加到最近的绝对定位包含块。如果Slide的所有容器都不是绝对定位的，请将overflow: hidden添加到body。

这是sample。如果您从 body 元素中删除 overflow: hidden，您将看到与预期相同的位置变化。

【讨论】：