Question

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

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

dd

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

我在http://jsfiddle.net/jokvqy6u/处为动画构建了一个简单的POC，它仅切换了[hidden] { display: none!important; }和show类。这只是我可以快速汇总并发送给我们的营销团队以说明动画以获取反馈的内容。

我认为我可以轻松地将hide和hidden选择器添加到POC，并且可以正常工作，然后我可以将其改装为真正的手风琴，但是动画却没有。似乎无法使用html上的:not(hidden)属性。您可以在http://jsfiddle.net/6zmdhqrn/2/上看到有关该项目的演示，其中第二项具有动画效果，因为它没有具有hidden属性。项目1和3具有hidden属性，甚至没有打开。

有人知道这是为什么发生的，我如何使用hidden属性来进行过渡？

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

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并不能完全隐藏元素（即，它仍会占用空间）。如果这是不受欢迎的，则可以考虑设置其他属性的动画，例如宽度或高度。

尝试为具有隐藏属性的显示/隐藏定义列表设置动画（隐藏属性会导致动画无法正常工作）

1 个答案: