使用动画在滚动底部时平滑显示隐藏按钮

Posted 2023-02-22

【中文标题】使用动画在滚动底部时平滑显示隐藏按钮

【英文标题】：Use animation to smoothly display hidden button when hitting bottom of scroll

【发布时间】：2021-03-20 09:24:36

【问题描述】：

当我向下滚动一个组件时，我有一个固定按钮，但是当我到达网页底部时，第二个按钮将出现在它下方。

我有一个工作组件，但是当我到达滚动底部时它很不稳定。到达页面底部后可能会出现滚动动画吗？

我当前的工作组件（向下滚动 div 以查看出现的第二个按钮）：

 const App = () => 
  const scrollListener = React.useRef();
  const [showSecondButton, setShowSecondButton] = React.useState(false);

  const onScroll = () => 
    if (scrollListener.current) 
      const  scrollTop, scrollHeight, clientHeight  = scrollListener.current;
      if (scrollTop + clientHeight >= scrollHeight * 0.85) 
        if (!showSecondButton) 
          setShowSecondButton(true);
        
       else 
        if (showSecondButton) 
          setShowSecondButton(false);
        
      
    
  ;

  return (
    <div>
      <div className="main" onScroll=() => onScroll() ref=scrollListener>
        <h1>My Page</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus
        error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
        dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
        sed quia non numquam eius modi tempora incidunt ut labore et dolore
        magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
        nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
        aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
        qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
        illum qui dolorem eum fugiat quo voluptas nulla pariatur?
      </div>
      <div
        className="my-absolute-btn"
        style= bottom: showSecondButton ? "40px" : "2px" 
      >
        <div>
          <button style= backgroundColor: "red" >My absolute button</button>
        </div>
        showSecondButton ? (
          <div>
            <button style= backgroundColor: "blue", marginTop: "50px" >
              Hidden second button
            </button>
          </div>
        ) : null
      </div>
    </div>
  );
;

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.main 
  position: relative;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid red;

.my-absolute-btn 
  position: absolute;
  /* bottom: 50px; */
  right: 0;
  left: 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

我当前解决方案的主要问题是我的按钮如何在某个时候“跳跃”，而另一个按钮不知从何而来。当我点击滚动中的某个点时，我希望第二个按钮“推动”第一个按钮。

【问题讨论】：

您可能会觉得这很有帮助：***.com/questions/123999/…

并非如此。问题不在于确定按钮何时应该可见，而在于当我想让按钮可见时如何缓和按钮。而不是我目前的“跳跃”。

当使用三元运算符显示/隐藏元素时，这些元素实际上是不可访问的，就像在 css 中使用 display:none 一样。问题是，当它被“隐藏”时，它不能被动画化，这就是按钮只是“跳跃”的原因。

@diane 它只是被隐藏了，因为我真的不知道更好。按钮的初始状态应该是什么，以便我可以优雅地将其动画到屏幕上？

【参考方案1】：

您需要在 .my-absolute-btn css 类中添加过渡属性

.main 
  position: relative;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid red;

.my-absolute-btn 
  position: absolute;
  right: 0;
  left: 0;
  transition: ease-in-out 0.5s;   /* add this line */

【参考方案2】：

使用类来显示或隐藏隐藏按钮，然后添加@sanket的答案，使绝对按钮出现平滑。

  <div className=showSecondButton ? "show" : "hide">
    <button style= backgroundColor: "blue", marginTop: "50px" >
      Hidden second button
    </button>
  </div>

然后您可以尝试使用此方法为隐藏按钮设置动画，根据您的喜好更改值

.show,
.hide 
   position: fixed;
   transition: bottom 0.5s ease-in-out; //to create smooth transition when entering and exiting
 

/*initial state, position the button offscreen*/
.hide 
  bottom: -500px;


/*position button back on screen*/
.show 
   bottom: 0;

您也可以尝试other ways 使用 css 隐藏元素并为其设置动画