使用react原生动画来回旋转徽标

import React, { useState } from 'react';

const Logo = () => {
  const [rotate, setRotate] = useState(false);

  const handleRotation = () => {
    setRotate(!rotate);
  };

  return (
    <div
      className={`logo ${rotate ? 'rotate' : ''}`}
      onClick={handleRotation}
    >
      Logo
    </div>
  );
};

export default Logo;

.logo {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.rotate {
  transform: rotate(360deg);
}