使用transition-behavior: allow-discrete实现手风琴内容过渡遇阻求助

开发者阿泽

2026-6-23

解决方案建议

方案1：正确结合 `@starting-style` 与 `transition-behavior` 修复打开动画

问题根源是元素从display:none切换到display:grid时，浏览器没有初始的0fr布局状态可过渡，导致打开动画无法触发。通过@starting-style显式定义展开状态的起始样式，就能让过渡生效：

.accordion-content {
  display: none;
  grid-template-rows: 0fr;
  overflow: hidden; /* 防止内容溢出 */
  transition: grid-template-rows 500ms, display 500ms allow-discrete;

  &[aria-hidden="false"] {
    display: grid;
    grid-template-rows: 1fr;
  }

  /* 为展开状态定义起始过渡样式 */
  @starting-style {
    &[aria-hidden="false"] {
      grid-template-rows: 0fr;
    }
  }
}

关键说明：

overflow: hidden 必须保留，否则内容在0fr状态下仍会显示
@starting-style 会告诉浏览器：当元素切换到aria-hidden="false"状态时，从grid-template-rows:0fr开始过渡到1fr
此方案仅支持Chrome/Edge 115+、Safari 16.4+，Firefox暂不支持transition-behavior

方案2：兼容Firefox的无障碍优化方案

如果需要兼容Firefox，放弃display:none的离散过渡，改用visibility配合grid-template-rows，同时通过aria-hidden确保无障碍：

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  overflow: hidden;
  transition: grid-template-rows 500ms, visibility 500ms;

  &[aria-hidden="false"] {
    grid-template-rows: 1fr;
    visibility: visible;
  }
}