用单个 实现 + → × 旋转动画的核心是：通过 ::before 和 ::after 伪元素绘制两条正交线段，设 transform-origin: center 并分别旋转 ±45°，配合 transition: transform 0.3s ease-in-out 实现平滑切换。
加号（+）点击后旋转变成叉号（×），本质是两个状态之间的视觉切换动画，不是“生成”新符号，而是用 CSS 控制 transform 和 opacity 实现平滑过渡。直接用字符替换（比如 innerHTML 改成 ×）会丢掉动画连贯性，必须用同一元素承载两种视觉状态。
怎么用单个
核心思路：把加号和叉号都放在同一个容器里，用伪元素或双层结构分别控制，再通过 class 切换触发旋转。最稳妥的做法是用一个 ，内部不写文本，靠 ::before 和 ::after 绘制两条线段模拟 +，再旋转它们形成 ×。
- 加号由两条正交的
div或伪元素构成：一条水平（width: 20px; height: 2px），一条垂直（width: 2px; height: 20px） - 叉号只需将这两条线各自绕中心旋转 ±45°，再微调位置使交叉点对齐
- 动画必须作用在
transform上（支持 GPU 加速），避免用left/top触发重排 - 别忘了加
transition: transform 0.3s ease-in-out，且只在过渡属性上设缓动，不要写all
rotate(45deg) 和 rotate(-45deg) 怎么对齐成标准 ×
单纯旋转 45° 后线条端点会偏移，看起来叉号“张开”或“收缩”。要让 × 看起来紧凑、居中，必须配合 transform-origin: center，并确保两条线长度相等、中心重合。常见错误是没设 transform-origin，导致旋转轴默认在左上角，结果整条线飞出去。
- 水平线：
transform: rotate(45deg); transform-origin: center; - 垂直线：
transform: rotate(-45deg); transform-origin: center; - 父容器需设
position: relative，子元素用position: absolute定位到中心 - 如果用伪元素，
::before和::after都要加content: ""和相同尺寸
为什么用 will-change: transform 但不能滥用
加号变叉属于高频交互动效（比如手风琴菜单、折叠面板），短时间频繁点击可能造成卡顿。加 will-change: transform 能提前告诉浏览器“这个元素要动了”，促使它创建独立合成层，提升帧率。但它不是免费午餐：
- 只应在真正需要动画的元素上设置，比如
.toggle-icon，不要写在 body 或通用 class 上 - 动画结束后建议用 JavaScript 移除该声明（或设为
auto），否则长期占用内存和图层资源 - 在低性能 Android WebView 中，
will-change可能反而引发闪烁，可加简单 UA 检测降级 - 更轻量的替代方案是
transform: translateZ(0)，兼容性更好，效果接近
真正容易被忽略的是“点击反馈延迟”——用户点下瞬间应立刻应用旋转 class，而不是等 JS 执行完才改 class；否则动画起始有滞后感。务必把 class 切换逻辑放在事件回调最开头，别裹在异步操作里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
