How to click an image and make a rotation

All we need is an easy explanation of the problem, so here it is.

I have below reactjs code. It renders an image dom. I want to implement a feather that when a user click on that image, the image is rotated 180 degrees. And at the end of the rotate animation, replace it with a new image. How can I implement it in reactjs?

 <div>
  <img className="icon-arrow" src={icon} role="button" onClick={()=> { // create an animation to rotate the image }} />
</div>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

This is the react way to do it.

class Image extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rotate: false,
      toggle: false
    };
    this.rotatingDone = this.rotatingDone.bind(this);
  }
  componentDidMount() {
    const elm = this.image;
    elm.addEventListener("animationend", this.rotatingDone);
  }
  componentWillUnmount() {
    const elm = this.image;
    elm.removeEventListener("animationend", this.rotatingDone);
  }

  rotatingDone() {
    this.setState(function(state) {
      return {
        toggle: !state.toggle,
        rotate: false
      };
    });
  }
  render() {
    const { rotate, toggle } = this.state;

    return (
      <img
        src={
          toggle
            ? "https://video-react.js.org/assets/logo.png"
            : "https://www.shareicon.net/data/128x128/2016/08/01/640324_logo_512x512.png"
        }
        ref={elm => {
          this.image = elm;
        }}
        onClick={() => this.setState({ rotate: true })}
        className={rotate ? "rotate" : ""}
      />
    );
  }
}

ReactDOM.render(<Image />, document.getElementById("container"));
.rotate {
 animation: rotate-keyframes 1s;
}

@keyframes rotate-keyframes {
 from {
  transform: rotate(0deg);
 }

 to {
  transform: rotate(180deg);
 }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>

Method 2

Here’s a crossbrowser way to do with Javascript, it will rotate each time you click, you can apply the same idea for react.

var rotated = false;

document.getElementById('image').onclick = function() {
    var div = document.getElementById('image'),
        angle = rotated ? 0 : 180;

    div.style.webkitTransform = 'rotate('+ angle +'deg)'; 
    div.style.mozTransform    = 'rotate('+ angle +'deg)'; 
    div.style.msTransform     = 'rotate('+ angle +'deg)'; 
    div.style.oTransform      = 'rotate('+ angle +'deg)'; 
    div.style.transform       = 'rotate('+ angle +'deg)'; 
    
    rotated = !rotated;
}
#image {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
<p>click on the image.</p>
<img id="image" src="https://lorempixel.com/400/200/" width="300" height="auto" id="image" />

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply