04 react css上下浮动动画效果

html原生实现上下浮动

我们有一个导向箭头，需要微微浮动提示用户具体操作导向，用css去写，实现方法如下：

• 首先创建一个dom元素，controller是包裹导向箭头的容器，img是导向箭头图片
• css中创建动画，动画的快慢速度可以通过dom元素高度与animation中的秒数去调整
  完整代码：

.controller {
        position: absolute;
        width: 24px;
        height: 12px;
        z-index: 100;
        bottom: 20px;
        left: 50%;
        margin-left: -12px;
        -webkit-animation: bounce-down 1.6s linear infinite;
        animation: bounce-down 1.6s linear infinite;
 
        img {
             position: absolute;
        }
 }
 
@-webkit-keyframes bounce-down {
       25% {
            -webkit-transform: translateY(-4px);
       }
       50%, 100% {
            -webkit-transform: translateY(0);
       }
       75% {
            -webkit-transform: translateY(4px);
       }
}
 
@keyframes bounce-down {
        25% {
             transform: translateY(-4px);
        }
        50%, 100% {
             transform: translateY(0);
        }
        75% {
             transform: translateY(4px);
        }
}

react 实现上下浮动

思路分析

React点击事件实现滚动到指定页面位置，在react框架中通过函数组件的钩子函数useRef()。

实现步骤

1.引入useRef

import React, { useEffect, useRef } from 'react';

2.在所属组件内定义—个变量

const downBtnRef = useRef(null)

3.在按钮上添加事件

<div className={styles.iconBox} ref={downBtnRef} onClick={toDown}>
     <DownOutlined />
</div>

4.定义点击事件

预期效果：平滑滚动

const toDown = () => {
    //在需要操作某个ref时候，通过downBtnRef.current，并且在整个项目中ref名唯一。
    if (downBtnRef.current) {
      console.log('downBtnRef.current', downBtnRef.current);
      window.scrollTo(0, downBtnRef.current.offsetHeight || 0)
    }
  }

实际效果：可以实现向下滑动一个屏幕的高度，但是我们需要平滑滚动。

对window.scrollTo()进行了解：

• 语法一：window.scrollTop(x,y) //x横坐标 y纵坐标
• 例：window.scrollTop(0，1000)
• 语法二：window.scrollTop(options)
• 例：代码如下

 window.scrollTo({
    top: -560,
    left: 0,
    behavior: "smooth"
  });

在react中实现

点击事件的完整代码：

const toDown = () => {
    //在react中需要操作某个ref时候，通过downBtnRef.current，并且downBtnRef在整个项目中ref名唯一。
    if (downBtnRef.current) {
      console.log('downBtnRef.current', downBtnRef.current);
      window.scrollTo({
        top: downBtnRef.current.offsetTop,
        behavior: "smooth"
      });
    }
  }

效果图：