怎样使用CSS3中的transition制作折叠风琴菜单-css教程-PHP中文网

直接用height: 0→auto无法实现transition动画，因auto不可插值；可行方案有三：js测量scrollheight后设具体height值、用足够大的max-height过渡（如500px）、或用transform: scaley()替代以获gpu加速。

怎样使用css3中的transition制作折叠风琴菜单

transition 怎么配合 height 实现折叠动画

直接对 height 用 transition 做展开收起，多数情况下会失效——因为从 height: 0 到 height: auto 无法计算过渡中间值，浏览器不支持 auto 的插值动画。

可行做法是用具体像素值替代 auto，常见有三种路径：

提前用 JS 测量内容高度，设为 height 的目标值（如 element.style.height = measuredHeight + 'px'）
改用 max-height 过渡（设一个足够大的安全上限，比如 max-height: 500px），避免 JS 测量
用 transform: scaleY() + overflow: hidden，性能更好但需注意子元素内联样式或绝对定位可能错位

推荐优先试 max-height 方案：写法简单、兼容性好（IE10+）、无需 JS 计算。只要内容高度不超过设定值，视觉上就无差别。

点击触发时 transition 不生效的常见原因

最典型的问题是：状态变更和 transition 定义不在同一渲染帧，导致浏览器跳过过渡，直接跳到终态。比如在事件回调里先改 class，再读取 offsetHeight 强制重排，却忘了加 getComputedStyle 或 offsetHeight 触发回流。

正确节奏是：

移除/添加控制类（如 is-open）
立即调用 getComputedStyle(element).height 或 element.offsetHeight 强制同步计算
再设置目标高度（或切换另一组 class）

漏掉第二步，transition 就不会启动——浏览器以为你一次性改完，没“变化过程”可过渡。

如何让多个面板互斥展开（手风琴效果）

纯 CSS 无法实现“关闭其他项”的逻辑，必须靠 JS 控制类名。关键点在于：不要只操作当前项，要统一管理状态。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

建议结构中给每个面板加唯一 data-id，并用一个变量记录当前展开项 ID：

const currentOpenId = ref(null);
function togglePanel(id) {
  if (currentOpenId.value === id) {
    currentOpenId.value = null;
  } else {
    currentOpenId.value = id;
  }
}

然后在模板中用条件判断：class="panel" :class="{ 'is-open': currentOpenId === item.id }"。这样任意时刻最多一个 is-open 生效，transition 自然只在它身上运行。

别用 display: none 配合 transition——display 变更会直接中断动画，且无法过渡。