实现悬浮弹窗+按钮转关闭按钮的旋转切换效果

要实现按钮点击旋转切换的效果，需要做以下几处修改：

1. 绑定点击事件并动态切换类名 #

修改React组件代码，给按钮添加点击事件切换状态，同时根据状态动态挂载旋转样式类：

import React, { useState } from "react";
import "./AddButton.css";

const AddButton = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleButtonClick = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <div className="add-btn-container">
        <div>
          <h1 
            onClick={handleButtonClick} 
            className={`add-btn ${isOpen ? 'add-btn--rotated' : ''}`}
          >
            +
          </h1>
        </div>
      </div>
    </div>
  );
};

export default AddButton;

2. 添加旋转过渡的CSS样式 #

修改CSS，给按钮添加基础过渡效果，新增旋转状态类，同时调整点击状态的transform确保缩放和旋转效果共存：

.add-btn-container {
  position: fixed;
  bottom: 50px;
  right: 50px;
  cursor: pointer;
}

.add-btn-container h1 {
  justify-content: center;
  font-size: 2.5rem;
  color: white;
  font-weight: 300;
}

.add-btn {
  margin-bottom: 70px;
  margin-right: -20px;
  display: flex;
  align-items: center;
  justify-self: center;
  width: 65px;
  height: 65px;
  border-radius: 100%;
  background-color: #ff6b6b;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
  /* 添加基础过渡，让所有样式变化平滑生效 */
  transition: all 0.2s ease-in-out;
}

/* 旋转状态类 */
.add-btn--rotated {
  transform: rotate(45deg);
}

.add-btn:active {
  transform: scale(0.9);
  filter: none;
}

/* 旋转状态下的点击效果，确保旋转和缩放同时生效 */
.add-btn--rotated:active {
  transform: scale(0.9) rotate(45deg);
}

内容的提问来源于stack exchange，提问作者Jeff Barra