javascript - 动画后可访问地隐藏和显示内容

Question

我正在实现一个包含一些隐藏内容的组件，这些内容在单击按钮时显示。我想在显示内容的 max-height 上运行转换，如下所示:

<button id="show-hide">Toggle content</button>
<div id="revealable-content" class="content is-collapsed">
Content to be revealed
  <a href="https://www.example.com">with a link</a>
</div>

.content {
  overflow: hidden;
  height: auto;
  max-height: 200px;
  width: 200px;
  background-color: darkgray;
  transition: max-height 1000ms;
}

.content.is-collapsed {
  max-height: 0
}

const button = document.getElementById('show-hide')
const content = document.getElementById('revealable-content')
let hidden = true

button.addEventListener('click', () => {
  hidden = !hidden

  if (hidden) {
    content.classList.add('is-collapsed')  
  } else {
    content.classList.remove('is-collapsed')
  }
})

到目前为止一切顺利。现在我想让它更易于访问，所以我将 hidden 属性添加到内容 div，并在我知道动画已使用 setTimeout 执行后将其设置为 true 或 false :

// at the bottom of the event handler...
setTimeout(() => {
  content.hidden = hidden
}, 1000)

这会破坏“展开”动画，但奇怪的是不会破坏“折叠”动画。折叠时，过渡动画按预期运行 1 秒。但是在展开时，max-height 立即应用，没有过渡。

参见 this codepen用于演示。

这是怎么回事，我该如何解决？

Answer 1

更新:
解决方案似乎比预期的要容易得多。在删除 is-collapsed 类之前使用一个短的超时时间，例如 10ms 将为您解决问题:

注意:我将超时设置为 100 毫秒，因为使用 firefox 时转换并不总是像 chrome 中那样平滑。

const button = document.getElementById('show-hide');
const content = document.getElementById('revealable-content');
let hidden = true;

button.addEventListener('click', () => {
    hidden = !hidden;
  
  if (hidden) {
    content.classList.add('is-collapsed');
    return setTimeout(() => {
      content.hidden = hidden;
    }, 1000);
  }

  content.hidden = hidden;
  return setTimeout(() => {
    content.classList.remove('is-collapsed');
  }, 100);
})

.content {
  overflow: hidden;
  height: auto;
  max-height: 200px;
  width: 200px;
  background-color: darkgray;
  transition: max-height 1000ms linear;
}

.content.is-collapsed {
  max-height: 0
}

<button id="show-hide">Toggle content</button>
<div hidden id="revealable-content" class="content is-collapsed">
Content to be revealed
  <a href="https://www.example.com">with a link</a>
</div>