I'm trying to get a wheel image to spin (CSS transform + transition) when it is clicked. Right now, I can only get it to spin while holding the mouse button using 'img: active'. I've looked for answers and generally get the sense that I should just use onClick to toggle a class with the animation on and off, but I don't seem to be doing it right. What am I doing wrong? Here's my code, for reference:
class Wheel extends React.Component
{
constructor(props){
super(props);
this.spin = this.spin.bind(this);
}
spin(e){
e.classList.toggle('rotate');
}
render(){
return (<div><img width="400" height="400" src="https://orig00.deviantart.net/0a38/f/2010/242/f/6/singapore_wheel_of_fortune_by_wheelgenius-d2xmb9v.jpg" onClick={this.spin}/>
</div>);
}
}
ReactDOM.render(
<Wheel/>,
document.getElementsByClassName('container-fluid')[0]
);
CSS:
.rotate {
-webkit-transform: rotate(1095deg);
-webkit-transition: -webkit-transform 3s ease-out;
}
/*
img:active {
-webkit-transform: rotate(1095deg);
-webkit-transition: -webkit-transform 3s ease-out;
}
*/
I've put everything on a CodePen at https://codepen.io/ejpg/pen/LmOVoR
Thank you in advance.
它应该是
e.target.classList.toggle('rotate');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.