Mantine Accordion过渡效果在移动浏览器中失效问题求助

问题背景 #

使用Mantine Accordion组件时，桌面端的展开/收起过渡完全正常，但在手机浏览器里过渡效果直接失效，面板瞬间显示/隐藏。试过加-webkit前缀、调整组件props、用sx写自定义样式，都没解决问题。

亲测有效的解决方案 #

• 强制开启硬件加速
  部分移动端浏览器会自动关闭非必要的硬件加速，导致CSS过渡不渲染。给Accordion面板加个触发硬件加速的样式：

  <Accordion sx={{ 
    '& .mantine-Accordion-panel': {
      transform: 'translateZ(0)',
      WebkitTransform: 'translateZ(0)'
    } 
  }}>
    {/* 你的面板内容 */}
  </Accordion>
  

  通过translateZ(0)让浏览器启用GPU渲染，很多移动端过渡失效的问题都能靠这个解决。

• 调整overflow属性
  Mantine默认给面板加了overflow: hidden，部分移动端浏览器会因为这个属性阻断过渡动画。可以单独给面板调整：

  <Accordion.Panel 
    sx={{ 
      overflow: 'visible',
      transition: 'height 0.3s ease-in-out',
      WebkitTransition: 'height 0.3s ease-in-out'
    }}
  >
    {/* 面板内容 */}
  </Accordion.Panel>
  

  注意如果面板内容高度不确定，可能需要额外加个容器控制高度，避免内容溢出。

• 替换过渡动画类型
  如果高度过渡还是不行，换成透明度+位移的组合，这类动画在移动端兼容性更好：

  <Accordion
    sx={{
      '& .mantine-Accordion-panel': {
        opacity: 0,
        transform: 'translateY(-10px)',
        WebkitTransform: 'translateY(-10px)',
        transition: 'opacity 0.3s ease, transform 0.3s ease',
        WebkitTransition: 'opacity 0.3s ease, transform 0.3s ease',
      },
      '& .mantine-Accordion-item[data-expanded="true"] .mantine-Accordion-panel': {
        opacity: 1,
        transform: 'translateY(0)',
        WebkitTransform: 'translateY(0)',
      },
    }}
  >
    {/* 面板内容 */}
  </Accordion>
  

• 升级Mantine版本
  老版本的Mantine可能存在移动端过渡的兼容性bug，升级到最新稳定版说不定能直接解决问题。

内容的提问来源于stack exchange，提问作者Mika Manelka