反应js（单击时的动画）

Question

我想知道当我点击反应图标时它应该旋转180度并再次当我[！[在此输入图像描述] [1]] [1]点击它应该旋转到0度。在反应中。

➡

Answer 1

您可以使用css 转换和转换。只需在图标组件中添加一个状态即可跟踪旋转状态

class RotateIcon extends Component {
    constructor(props) {
        this.state = {
          rotated: false
        };
    }

    onIconClicked = () => {
        this.setState({ rotated: !this.state.rotated });
    };

    render() {
      const degree = this.state.rotated ? '180' : '0';
      return (
         <Icon // Whatever your icon is called
           style={{
             transform: `rotate(${degree}deg)`,
             transition: 'transform 200ms linear' // update time here  
           }} 
           onClick={this.onIconClicked} 
         /> 
      );
    }
}