React 的 CSS 方案

export default class App extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div className="App">
        <Button value="按钮1" onClick={this.z.bind(this)} />
        <Button value="按钮2" onClick={this.z.bind(this)}/>
        <Button value="按钮3" onClick={this.z.bind(this)}/>
      </div>
    );
  }
  z(xxx) {
    console.log("外面的函数");
    console.log(xxx);
  }
}
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
      deltaX: 0,
      deltaY: 0
    };
    this.myRef = React.createRef();
  }
  render() {
    return (
      <button ref={this.myRef} className="button2" onClick={this.x.bind(this)}>
        <span className="value">{this.props.value}</span>
        {this.state.active === true ? (
          <span
            className="circle"
            onAnimationEnd={this.y.bind(this)}
            style={{ left: this.state.deltaX, top: this.state.deltaY }}
          />
        ) : (
          ""
        )}
      </button>
    );
  }
  x(zzz) {
    let { x, y } = this.myRef.current.getBoundingClientRect();
    let { clientX, clientY } = zzz;
    let deltaX = clientX - x - 5;
    let deltaY = clientY - y - 5;
    this.setState({
      active: true,
      deltaX: deltaX,
      deltaY: deltaY
    });
    console.log("里面的函数");
    this.props.onClick.call(null, "frank");
    this.props.onClick && this.props.onClick.call(null, zzz);
  }
  y() {
    this.setState({
      active: false
    });
  }
}
App.__style__ = `
  .button2 {
  box-sizing: border-box;
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 4px;
  padding: 4px 1em;
  margin: 10px;
  position: relative;
  overflow: hidden;
}
.button2:focus {
  outline: none;
  border-color: black;
}
.button2 > .circle {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background: red;
  opacity: 0.5;
  display: inline-block;
  animation: 1s big forwards;
  position: absolute;
  z-index: 0;
}
.button2 > .value {
  position: relative;
  z-index: 1;
}

@keyframes big {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(10);
  }
}
`;
 
        Copied!