react抛物线小球实现

            .ballFather{

                position: absolute;

                width: 15px;

                height: 15px;

                border-radius: 50%;

                transition: all  0.5s cubic-bezier(0.52, -0.3, 0.93, 0.54);

                z-index: 999;

            }

            .ballSon{

                width: 15px;

                height: 15px;

                background: #3190e8;

                border-radius: 50%;

                transition:all 0.5s linear;

            }

import React, { Component } from "react";

import { connect } from "isomorphism-sdk";

import styled, { keyframes, css } from "styled-components";



import {Track,Button} from '@components'

const Wrap = styled.div`

    text-align:center;

    color:green;

`;



const Btn = styled.div`

    position:fixed;

    bottom:0;

    left:0;

    height:100px;

    width:100vw;

    line-height:100px;

    text-align:center;

    background:pink;



`

const Ball = styled.div`

    height：20px;

    width:20px;

    background:red;

`

const BigBox= styled.div`

height:68px;

border:1px solid blue;

margin-bottom:40px;

text-align:left;

`

const SmallBox = styled.span`

display:inline-block;

height:50px;

width:160px;

background:grey;

`







const  TheBall={

	newBall(event,target){

		let div=document.createElement('div');

		div.className='ballFather';

		document.body.appendChild(div);

		let sonDiv=document.createElement('div');

		sonDiv.className='ballSon'

		div.appendChild(sonDiv);

		let top=event.target.getBoundingClientRect().top;

		let left=event.target.getBoundingClientRect().left;

		div.style.left=left+'px';

		div.style.top=top+'px';

		let y = (document.documentElement.clientHeight - top +100);//加１００是为了防止掉不下去

        let x = (document.documentElement.clientWidth+7.5-left)

        // debugger

		div.style.display ='';

        const clientWidth = document.documentElement.clientWidth;

        const clientHeight = document.documentElement.clientHeight;

		div.style.transform = `translate3d(0,${y}px,0)`;

		sonDiv.style.transform = `translate3d(${x/2}px,0,0)`;

		setTimeout(()=>{

			document.body.removeChild(div);

		},500)

	}

}





class App extends Component {

    constructor(props) {

        super(props);

        this.state = {

            aaa:false

        };

    }



    aaa = (event) =>{

        TheBall.newBall(event,target)

        console.log(123)

    }



    render() {

        const { activity } = this.props;



        return (

          <Wrap>

                  <BigBox>

                      <SmallBox onClick={this.aaa.bind(this,{x:375,y:-50})}> 123</SmallBox>

                  </BigBox>

                  <BigBox>

                      <SmallBox onClick={this.aaa.bind(this)}>0</SmallBox>

                  </BigBox>

                  <BigBox></BigBox>

                  {         /**

                      <Track type='click' id='12671'>

                          <Button onClick={this.aaa.bind(this)}>我是一号</Button>

                      </Track>

                      <Track>

                          <Button onClick={this.aaa}>我是二号</Button>

                      </Track>

                      <Track>

                          <Button>我是三号</Button>

                      </Track>

                       <Button>我是死号</Button>

                       **/

                  }





              <Btn className='abs'>O</Btn>

          </Wrap>

        );

    }

}



export default connect(({ location, activity }, tasks) => {

    return {

        location,

        activity

    };

})(App);