如何为Accordion面板添加Tailwind类实现开合动效？

你的代码里动画不生效的核心问题是**hidden类会直接把元素设为display: none**，过渡动画需要元素保持在文档流中才能生效，直接添加/移除hidden会打断过渡效果。下面是具体修复步骤：

1. 移除初始的hidden类，改用max-h-0和opacity-0控制初始状态 #

内容面板的初始状态不需要hidden类，我们已经通过max-h-0（高度为0）和opacity-0（完全透明）实现了隐藏效果：

<div
  data-collapse="collapse-1"
  class="custom-accordion-content overflow-hidden transition-all duration-700 ease-in-out max-h-0 opacity-0 example-content-class"
>

2. 修改JS逻辑，不再操作hidden类 #

只需要切换max-h-0/max-h-screen和opacity-0/opacity-100这两组类，完全去掉对hidden的判断和操作：

function toggleAccordionContent(element) {
  const content = element.nextElementSibling;

  if (content.classList.contains('max-h-0')) {
    content.classList.remove('max-h-0', 'opacity-0');
    content.classList.add('max-h-screen', 'opacity-100');
  } else {
    content.classList.add('max-h-0', 'opacity-0');
    content.classList.remove('max-h-screen', 'opacity-100');
  }
}

3. 可选：优化动画流畅度 #

如果觉得max-h-screen的范围太宽泛，可以根据内容预估一个合理的最大高度（比如max-h-96），动画会更自然；另外可以把transition-all改成transition-[max-height,opacity]，只对需要过渡的属性生效，提升性能：

<div
  data-collapse="collapse-1"
  class="custom-accordion-content overflow-hidden transition-[max-height,opacity] duration-700 ease-in-out max-h-0 opacity-0 example-content-class"
>

完整修复后的代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accordion Example</title>
    <script>
      function toggleAccordionContent(element) {
        const content = element.nextElementSibling;

        if (content.classList.contains('max-h-0')) {
          content.classList.remove('max-h-0', 'opacity-0');
          content.classList.add('max-h-screen', 'opacity-100');
        } else {
          content.classList.add('max-h-0', 'opacity-0');
          content.classList.remove('max-h-screen', 'opacity-100');
        }
      }
    </script>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="accordion" class="space-y-4">
      <!-- Accordion Item -->
      <div
        class="group accordion-item-wrapper example-class border border-gray-300 rounded-lg"
      >
        <div
          role="button"
          class="accordion-summary block w-full p-4 transition-all duration-300 ease-in-out example-summary-class bg-gray-100 hover:bg-gray-200 cursor-pointer"
          onclick="toggleAccordionContent(this)"
        >
          <span class="font-semibold">Accordion Title</span>
        </div>
        <div
          data-collapse="collapse-1"
          class="custom-accordion-content overflow-hidden transition-all duration-700 ease-in-out max-h-0 opacity-0 example-content-class"
        >
          <div class="p-4 bg-white">
            <p>
              This is the content inside the accordion. You can place any HTML
              content here.
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

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