Wie Sie ein Bild klicken und eine Drehung machen

Question

Ich habe unter reactjs Code. Es macht ein Bild dom. Ich möchte eine Feder implementieren, die, wenn ein Benutzer auf das Bild klickt, das Bild um 180 Grad gedreht wird. Und ersetzen Sie sie am Ende der Rotationsanimation durch ein neues Bild. Wie kann ich es in reactjs implementieren?

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

Answer 1

Dies ist die Art und Weise reagieren, es zu tun.

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>

Answer 2

Hier ist ein cross Weg mit Javascript zu tun, wird es jedes Mal drehen Sie klicken, können Sie die gleiche Idee für reagieren gelten.

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" />