我花了一段时间才弄明白，但这是一个有趣的问题。
当你 * 打开 * details元素时，它的内容-根据定义-变得可见。这就是为什么你应用的每个动画都是可见的。然而，当你 * 关闭 * details元素时，它的内容-根据定义-变得不可见，* 立即 。所以即使你尝试应用的每个动画实际上会发生，它也只是不可见。
所以我们需要告诉浏览器延迟隐藏元素，应用动画，然后才隐藏元素。让我们使用一些JS来完成这个任务。
我们需要捕捉用户何时切换details元素。 假设 *，相关事件应该是toggle。然而，这个事件只有在浏览器隐藏所有内容 * 之后 * 才触发。所以我们实际上将使用click事件，它在隐藏发生 * 之前 * 触发。

const details = document.querySelector("details");
details.addEventListener("click", function(e) {
  if (details.hasAttribute("open")) { // since it's not closed yet, it's open!
    e.preventDefault(); // stop the default behavior, meaning - the hiding
    details.classList.add("closing"); // add a class which applies the animation in CSS
    setTimeout(() => { // only after the animation finishes, continue
      details.removeAttribute("open"); // close the element
      details.classList.remove("closing");
    }, 400);
  }
});

@keyframes open {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

/* closing animation */
@keyframes close {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

details[open] summary~* {
  animation: open .5s;
}

/* closing class */
details.closing summary~* {
  animation: close .5s;
}

<details>
  <summary>Cfare do te mesosh gjate ketij materiali:</summary>
  <ul>
    <li>
      <p>Shqiperia gjate luftes se pare boterore</p>
    </li>
    <li>
      <p>Shqiperia mes lufterave boterore</p>
    </li>
    <li>
      <p>Shqiperia gjate luftes se dyte boterore</p>
    </li>
  </ul>
</details>

请注意，持续时间不保证是准确的，not in CSS和not in JS.这就是为什么我设置了JS超时比CSS动画持续时间（400 ms vs 500 ms）稍低一点，所以我们可以确保动画在我们隐藏元素后结束一点，所以我们不会得到任何 Flink .