css - 尝试使用隐藏属性为显示/隐藏定义列表设置动画(隐藏属性导致动画不起作用)

Question

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

dd 的显示/隐藏显示然后通过隐藏属性选择器进行控制(在本例中，这是来自 Bootstrap 样式表):

[hidden] {
  display: none!important;
}

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

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

我以为我可以轻松添加 hidden和 :not(hidden)选择器到 POC，它会工作得很好，然后我可以 retrofit 成真正的 Accordion ，但动画似乎不适用于 hidden html上的属性。您可以在 http://jsfiddle.net/6zmdhqrn/2/ 查看演示第二项动画是因为它没有有 hidden属性。第 1 项和第 3 项具有 hidden属性，甚至打不开。

有谁知道为什么会发生这种情况以及如何让我的转换与 hidden 一起工作？属性？

编辑 我在 http://jsfiddle.net/6zmdhqrn/3/ 工作了一半通过覆盖 [hidden]来自 bootstrap 的选择器和一些重要的语句。我仍然很难看，但隐藏起来了。我怀疑它与元素 display:none 有关动画没有尺寸/信息可以从哪里开始制作动画？仍在寻找有关如何获取开场动画的信息/提示。

Answer 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 并不能完全隐藏元素(即它仍然占用空间)。如果这是不受欢迎的，您可以考虑为不同的属性设置动画，例如宽度或高度。