React 通过原生js实现鼠标一定范围内跟随动画

当鼠标悬浮到灰色区域时，绿色区域跟随鼠标

image.png
image.png
image.png

React

import React,{Component} from 'react';
import styles from './style.scss';

class MouseFallow extends Component{
    constructor(props){
        super(props);
        this.state={
            xPos:'0px',
            yPos:'0px'
        }
    }

    handleMouseOver=(e)=>{
        const child=e.currentTarget.firstElementChild;
        const childPos=child.getBoundingClientRect();
        const x=e.pageX-(childPos.left+child.offsetWidth/2);
        const y=e.pageY-(childPos.top+child.offsetHeight/2);
        this.setState({
            xPos:x+'px',
            yPos:y+'px'
        });

    }
    handleMouseOut=()=>{
        this.setState({
            xPos:0+'px',
            yPos:0+'px'
        });
    }

    render(){
        const {xPos,yPos}=this.state;
        const moveStyle={
            transform:`translate(${xPos},${yPos})`
        };
        return (
            <div 
            className={styles.external} 
            onMouseMove={this.handleMouseOver}
            onMouseOut={this.handleMouseOut}
            >
                <div className={styles.internal} style={moveStyle}>
                </div>
            </div>
        );
    }
}
export default MouseFallow;

css

.external{
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background: #555;
    padding: 16px;
    cursor: pointer;
}
.internal{
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: #563;
    transition:0.3s transform cubic-bezier(0.2, 0.0, 0.2, 1);
}
.external:hover{
    .internal{
        border:1px solid rgba(255,255,255,1)
    }
}