CODEWITHSUNDEEP
javascriptcssreactjs
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42500

How to click an image and make a rotation

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>

Upvotes: 4

Views: 12850

Answers (2)

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

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>

Upvotes: 14

Horai Nuri
Horai Nuri

Reputation: 5578

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="http://lorempixel.com/400/200/" width="300" height="auto" id="image" />

Upvotes: 2

Related Questions