带有动画的无障碍手风琴

Question

我正在尝试使这个可访问的手风琴具有打开关闭淡入/淡出动画，而不是默认的硬打开关闭功能。到目前为止还没有任何运气。

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

关于如何解决这个问题有什么想法或建议吗？

我尝试了不同的打开/关闭方法，但没有添加淡入/淡出效果。

codepen.io/mharmontx/pen/rNRrOYq

Answer 1

通过转换

grid-template-rows

可以实现相当简单的打开和关闭转换。下面的示例从

grid-template-rows: 0fr

转换为

grid-template-rows: 1fr

。

将其与设置

overflow: hidden

孩子相结合，使效果发挥作用。

const button = document.querySelector('button');
const collapsible = document.querySelector('.collapsible');

button.addEventListener('click', event => {
  collapsible.classList.toggle('open');
});

.collapsible {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-in-out;
}

.collapsible.open {
  grid-template-rows: 1fr;
}

.content {
  grid-area: 1 / 1;
  overflow: hidden;
  background: red;
}

<button>Toggle</button>

<div class="collapsible">
  <div class="content">
    <p>Lorem ipsum dolor sit amet pretium do porttitor pulvinar quam nec velit labore vulputate ultrices. Consectetur nisi eget quam sodales massa auctor iaculis mi aliqua enim duis tellus tincidunt condimentum.</p>
    <p>Sed laoreet dictumst aliquet egestas pellentesque auctor sed aliquet. Convallis incididunt cras nunc semper laoreet eiusmod tempor non platea pretium velit blandit mi. Ornare integer egestas curabitur dictum fusce curabitur est ullamcorper morbi eros pulvinar morbi integer.</p>
  </div>
</div>