React 用于实现 购物车小球动画

#创作灵感#

#浅浅的记录一下咱们的学习过程吧

#好用就拿去用，不好用就走开，

1复制粘贴会不会

这不用我教吧，ctrl+c,ctrl+v

2 开始

通过定义ref来获取 小球，添加购物车的Button，他的x,y标 结算按钮的位置，购物车的数量，以及选中的状态 和我们随便写写的列表 

const [count,setCount] = useState(0)

  const [shouldBall,setBall] = useState(false)

  const [list,setList] = useState([{key:1,value:1,ref:null,className:''},{key:2,value:2,ref:null,className:''},{key:3,value:3,ref:null,className:''}])

  const [isVisble,setIsVisible] = useState(false)

  const [num,setNum] = useState(null)

  const ballWrapperRef = useRef(null);

  const originRef = useRef(null);

  const targetRef = useRef(null);

  const [x,setX] = useState(0)

  const [y,setY] = useState(0)

3通过 点击事件来切换我们小球出现的位置

return (

    <div className='App' ref={ballWrapperRef}>

      {list.map((item)=>{

        return <div key={item.key} style={
  {height:60,}}>{item.value}

        <div className='' ref={item.ref} onClick={()=>{onAdd(item.key)}}>

        +

      </div></div>

      })}

      <div style={
  {height:70}}>123</div>

      <div

          className="target"

          ref={targetRef}

        >

          {count}

        </div>

        <div className="ball" style={animateStyle} />

      </div>

  )

}



export default App

4触发点击事件 以及监听小球的动画