我有以下reactjs代码。它呈现一个图像 dom。我想实现一个羽毛，当用户单击该图像时，图像将旋转 180 度。并在旋转动画结束时，将其替换为新图像。我如何在 reactjs 中实现它？
<div>
<img className="icon-arrow" src={icon} role="button" onClick={()=> { // create an animation to rotate the image }} />
</div>
如何单击图像并进行旋转
IT技术
javascript
css
reactjs
2021-05-04 21:35:03
2个回答
这是react的方式来做到这一点。
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>这是使用 Javascript 的跨浏览器方式，每次单击时它都会旋转，您可以将相同的想法应用于 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" />