画像をクリックして回転させる方法

Question

以下のコードはreactjsです。それは画像domをレンダリングする。私は、ユーザーがその画像をクリックすると、画像が180度回転される羽根を実装したいと思います。回転アニメーションの終わりに、それを新しい画像で置き換えます。どのように私はreactjsでそれを実装できますか？ここで

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

Answer 1

これはそれを行うには反応する方法です。

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

はJavascriptを行うにはcrossbrowserの方法です、それはあなたが反応するために同じ考え方を適用することができ、あなたがクリックするたびに回転します。

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