尝试使用隐藏属性为显示/隐藏定义列表设置动画（隐藏属性导致动画不起作用）答案

【问题标题】：Trying to animate a show/hide definition list with hidden attribute (hidden attribute causes animation to not work)尝试使用隐藏属性为显示/隐藏定义列表设置动画（隐藏属性导致动画不起作用）
【发布时间】：2019-01-17 01:23:42
【问题描述】：

我正在使用定义列表构建一个可访问的手风琴。我的这个工作很好，其中<dt> 包含一个<button>，当单击它时，它会从真/假切换aria-expanded，并在相应的<dd> 上切换hidden 属性。可访问性还有其他事情要做，但这是列表和显示/隐藏的基础。

dd 的显示/隐藏显示然后通过隐藏的属性选择器进行控制（在这种情况下，它来自引导样式表）：

[hidden] {
  display: none!important;
}

现在的显示/隐藏功能很难显示/隐藏，我正在尝试通过 css 过渡添加漂亮的动画（这需要在支持过渡的 IE11 中工作。）

我为 http://jsfiddle.net/jokvqy6u/ 的动画构建了一个简单的 POC，它只是切换了 show 和 hide 类。这只是我可以快速汇总并发送给我们的营销团队以说明动画以获得反馈的东西。

我以为我可以轻松地将 hidden 和 :not(hidden) 选择器添加到 POC 中，它会正常工作，然后我可以改装成真正的手风琴，但动画似乎不起作用在 html 上带有 hidden 属性。你可以在http://jsfiddle.net/6zmdhqrn/2/ 看到一个演示，其中第二个项目动画，因为它没有有一个hidden 属性。第 1 项和第 3 项具有hidden 属性，甚至无法打开。

有谁知道为什么会发生这种情况以及如何让我的过渡使用hidden 属性？

编辑通过用一些重要的语句覆盖来自引导程序的[hidden] 选择器，我在http://jsfiddle.net/6zmdhqrn/3/ 工作了一半。我仍然得到一个艰难的表演，但隐藏起来。我怀疑这与元素 display:none 有关，其中动画没有尺寸/信息可以开始制作动画？仍在寻找有关如何获取开场动画的信息/提示。

【问题讨论】：

标签： css css-transitions accessibility css-animations hidden

【解决方案1】：

你猜对了，这里的问题是 display 不是 animatable CSS 属性。

您需要将动画基于可动画属性，例如 opacity。

这是一个快速演示：

const el = document.querySelector('div');

document.querySelector('button').addEventListener('click', () => {
  if (el.classList.contains('visible'))
    el.classList.remove('visible');
  else
    el.classList.add('visible');
})

div {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
}

<div class="visible">some content!</div>
<button>toggle visibility</button>

您可能已经注意到，将不透明度设置为 0 并不会完全隐藏元素（即它仍然占用空间）。如果这是不受欢迎的，您可以考虑为不同的属性设置动画，例如宽度或高度。

【讨论】：