Chrome中HTML details元素内动画无法重复播放的解决咨询

Chrome浏览器中，details元素的open属性变化时，仅第一次打开会触发动画，后续开闭不再生效——这是因为Chrome不会自动重置已完成的动画状态。以下是两种可靠的解决方案：

方法一：JavaScript辅助重置动画 #

通过监听details的toggle事件，强制重置动画状态，确保每次打开都重新触发动画：

修改后的代码 #

HTML

<details id="animated-details">
  <summary>Click me to open an animated list of items</summary>
  <ul>
    <li>These elements</li>
    <li>should ease in</li>
    <li>with a duration of 1s.</li>
  </ul>
</details>

CSS

details {
  font-size: x-large;
}

.details-open ul li {
  animation: expand-details 1s ease-in-out;
  position: relative; /* 必须添加，否则left属性不生效 */
}

.details-open ul li:nth-child(1) {
  animation-fill-mode: backwards;
  animation-delay: 100ms;
}
.details-open ul li:nth-child(2) {
  animation-fill-mode: backwards;
  animation-delay: 200ms;
}
.details-open ul li:nth-child(3) {
  animation-fill-mode: backwards;
  animation-delay: 300ms;
}

@keyframes expand-details {
  from {
    opacity: 0;
    left: -20px;
  }
  to {
    opacity: 1;
    left: 0;
  }
}

JavaScript

const details = document.getElementById('animated-details');
const listContainer = details.querySelector('ul');

details.addEventListener('toggle', () => {
  if (details.open) {
    // 先移除动画类，强制浏览器重绘后再重新添加
    listContainer.classList.remove('details-open');
    void listContainer.offsetWidth; // 触发重绘的关键步骤
    listContainer.classList.add('details-open');
  } else {
    // 关闭时移除动画类，避免下次打开时状态冲突
    listContainer.classList.remove('details-open');
  }
});

方法二：纯CSS过渡替代动画（简化方案） #

如果不需要复杂的动画序列，也可以用transition替代animation，利用details[open]的状态变化触发过渡：

details {
  font-size: x-large;
}

ul li {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 1s ease-in-out;
  position: relative;
}

details[open] ul li:nth-child(1) {
  transition-delay: 100ms;
  opacity: 1;
  transform: translateX(0);
}
details[open] ul li:nth-child(2) {
  transition-delay: 200ms;
  opacity: 1;
  transform: translateX(0);
}
details[open] ul li:nth-child(3) {
  transition-delay: 300ms;
  opacity: 1;
  transform: translateX(0);
}

这种方法在Chrome中能自动触发过渡，因为每次open状态变化时，元素的样式会被重新计算，过渡会重新执行。

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