react 小球动画

app.js代码

import React, { Component, createElement, createRef } from 'react'
import './App.scss'

export default class Addcart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      arr: ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'],
      // 初始值
      num: 0
    }
  }
  // 获取收藏盒子
  collect = createRef ()
  Getcollect = () => this.collect.current 
  nums = 0
  // 给每个span绑定点击事件
  Fnstart(e) {
    this.nums++
    // 获取当前span的x和y的值
    let x = e.changedTouches[0].clientX
    let y = e.changedTouches[0].clientY
    // 点击一次让state中的num+1
    this.setState({
      num: this.nums
    })
    // 调用函数把x和y当参数传过去
    this.createBall(x, y)
    // 判断收藏的数量不为0的时候让收藏盒子显示
    if (this.nums != 0) {
      this.Getcollect().style.opacity = '1'
    }
  }
  // 创建小球添加动画
  createBall(left, top) {
    // 创建div元素
    let Ball = document.createElement('div')
    // 给div定位
    Ball.style.position = "absolute";
    // div的left和span的left是一样的
    Ball.style.left = left + 'px'
    // div的top和span的top是一样的
    Ball.style.top = top + 'px'
    Ball.style.width = '20px'
    Ball.style.height = '20px'
    Ball.style.borderRadius = '50%'
    Ball.style.backgroundColor = 'red'
    // 贝塞尔曲线
    Ball.style.transition = "left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)";
    // 向父元素最后添加
    document.body.appendChild(Ball);
    // 添加动画属性
    setTimeout(() => {
      Ball.style.left = this.Getcollect().offsetLeft + this.Getcollect().offsetWidth / 2 + "px";
      Ball.style.top = this.Getcollect().offsetTop + "px";
    }, 0);
    //动画结束后，删除自己
    // ontransitionend事件 是在 transition过度完之后执行的 
    Ball.ontransitionend = function () {
      Ball.remove();
    };
  }
  render() {
    return (
      <div className='Addcart'>
        <div className='box'>
          {this.state.arr.map((item, index) => (
            <div className='div' key={index}>
              {item}
              <span onTouchStart={this.Fnstart.bind(this)}>+</span>
            </div>
          ))}
        </div>
        <div className='collect' ref={this.collect}>
            <span>数量</span> : {this.state.num}
          </div>
      </div>
    )
  }
}

scss代码

 

.Addcart {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .box {
      flex: 1;
      width: 100%;
      overflow: auto;
      .div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 20px;
          height: 100px;
          color: black;
          font-size: 30px;
 
          span {
              text-align: center;
              font-size: 30px;
              color: black;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid #000;
              line-height: 40px;
          }
      }
  }
}
// 收藏
.collect {
  bottom: 0;
  width: 100%;
  height: 40px;
  background: red ;
  height: 40px;
  border: 1px solid #ccc;
  border-top: none;
  text-align: center; 
  font-size: 30px;
  flex: 0;
  flex-basis:40px;
  span{
      color: blue;
  }
}