react抛物线小球实现

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)`;

		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);