vue 3 折叠面板箭头旋转需绑定:class动态控制is-active类，css中用transform: rotate(90deg)配合transition实现平滑动画，每项应维护独立展开状态。
在 Vue 3 模板中实现折叠面板箭头的旋转效果，核心是通过绑定 CSS 类控制图标元素的 transform 变换，并配合展开/收起状态做条件切换。不需要 JS 手动操作 DOM，纯响应式驱动即可。
用 class 绑定控制旋转状态
箭头图标（比如一个 <div class="ibc-icon-arrow"></div>）通常用 CSS 的 transform: rotate(0deg) 和 rotate(90deg) 实现左右翻转。关键是在模板中根据当前是否展开，动态添加或移除表示“激活”的类名（如 is-active）：
- 给箭头容器加一个响应式 class：例如
:class="{ 'is-active': isActive }" - 在 CSS 中定义：
.ibc-collpase-item__icon.is-active .ibc-icon-arrow { transform: rotate(90deg); transition: transform 0.25s ease; } -
isActive是组件内用ref或computed管理的状态变量，对应当前项是否展开
确保过渡动画平滑
仅加 transform 不够，必须显式声明过渡才能有旋转动画：
- CSS 中为箭头元素设置基础过渡：
.ibc-icon-arrow { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } - 避免写
all过渡，只限定transform更精准、性能更好 - 如果使用 SVG 图标，也可直接对
<svg></svg>或<g></g>元素加 class 控制旋转
注意图标方向与语义匹配
旋转角度需符合用户直觉。常见约定有：
- 右箭头（▶）展开时顺时针转 90° 变成下箭头（▼），表示“向下展开”
- 左箭头（◀）展开时逆时针转 90° 变成上箭头（▲），适合标题在右侧、箭头在左的布局
- 用 CSS 变量统一管理角度，便于主题切换：
--arrow-rotate: 90deg;，再在 class 中引用transform: rotate(var(--arrow-rotate));
避免常见陷阱
实际开发中容易忽略的细节：
- 未设置
display: inline-block或inline-flex，导致transform在行内元素上失效 - 父容器设置了
overflow: hidden且旋转后图标超出边界被裁剪 - 多个折叠项共用同一个
isActiveref，导致状态互相干扰——应为每项维护独立状态（如用ref([])记录已展开 key，或用v-for中的索引映射状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
