Animating SVG react elements and normal DOM elements with setState

animation-test-1.js

const styles = {}

styles.base = {
  width: '150px',
  height: '150px',
  background: 'mediumorchid',
  transition: '0.35s all ease-in-out'
};

styles.circle = {
  borderRadius: '50%',
  transform: 'translateX(500px) translateY(500px)'
};

styles.clicked = { ...styles.base, ...styles.circle };

class SVGSquare extends Component {
  constructor() {
    super();
    this.state = { styles: styles.base, toggle: false };
    this.onClick = this.onClick.bind(this);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
  }

  onClick() {
    if (this.state.toggle) {
      this.setState({ styles: styles.base, toggle: false });
    }
    else {
      this.setState({ styles: styles.clicked, toggle: true });
    }
  }

  onMouseOver() {
    this.setState({ styles: { ...this.state.styles, cursor: 'pointer' } });
  }

  onMouseOut() {
    this.setState({ styles: { ...this.state.styles, cursor: 'none' } });
  }

  render () {
    return (
      <svg style={this.state.styles}
           onClick={this.onClick}
           onMouseOver={this.onMouseOver}
           onMouseOut={this.onMouseOut} />
    );
  }
}



class Square extends Component {
  constructor() {
    super();
    this.state = { styles: styles.base, toggle: false };
    this.onClick = this.onClick.bind(this);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
  }

  onClick() {
    if (this.state.toggle) {
      this.setState({ styles: styles.base, toggle: false });
    }
    else {
      this.setState({ styles: styles.clicked, toggle: true });
    }
  }

  onMouseOver() {
    this.setState({ styles: { ...this.state.styles, cursor: 'pointer' } });
  }

  onMouseOut() {
    this.setState({ styles: { ...this.state.styles, cursor: 'none' } });
  }

  render() {
    return <div style={this.state.styles}
                onClick={this.onClick}
                onMouseOver={this.onMouseOver}
                onMouseOut={this.onMouseOut} />;
  }
}