使用JS实现快速DOM动画

Question

我目前正在设计一个网站，我有一个包含3个下拉列表的部分。

在div单击时，下拉菜单的内容将显示，与其关联的图标将折叠。如果要关闭下拉菜单，它也会出现在另一边。

我之前一直在使用querySelector，在阅读并在JSPerf上看到后者在性能方面更好之后，我切换到了getElementById。

  if (window.getComputedStyle(document.getElementById('show-info-1')).display === "none") {
    document.getElementById('show-info-1').style.display = 'block';
    document.getElementById('show-open-1').style.display = 'none';
    document.getElementById('show-close-1').style.display = 'block';
  } else {
    document.getElementById('show-info-1').style.display = 'none';
    document.getElementById('show-open-1').style.display = 'block';
    document.getElementById('show-close-1').style.display = 'none';
  }
}
document.getElementById("show-2").onclick = function() {
  if (window.getComputedStyle(document.getElementById('show-info-2')).display === "none") {
    document.getElementById('show-info-2').style.display = 'block';
    document.getElementById('show-open-2').style.display = 'none';
    document.getElementById('show-close-2').style.display = 'block';
  } else {
    document.getElementById('show-info-2').style.display = 'none';
    document.getElementById('show-open-2').style.display = 'block';
    document.getElementById('show-close-2').style.display = 'none';
  }
}
document.getElementById("show-3").onclick = function() {
  if (window.getComputedStyle(document.getElementById('show-info-3')).display === "none") {
    document.getElementById('show-info-3').style.display = 'block';
    document.getElementById('show-open-3').style.display = 'none';
    document.getElementById('show-close-3').style.display = 'block';
  } else {
    document.getElementById('show-info-3').style.display = 'none';
    document.getElementById('show-open-3').style.display = 'block';
    document.getElementById('show-close-3').style.display = 'none';
  }
}

我真的希望DOM动画稍微快一点，因为它从这里看起来真的很慢。我也想避免使用jQuery，因为我知道这是一个解决方案，但我想VanillaJS就足够了。

Answer 1

您是否考虑过将您的关注点分开，并更多地依靠您的CSS来完成工作？

类似于：

HTML：

<div id="btn-wrapper-2">
  <!-- "show-info-2" -->
  <!-- "show-open-2" -->
  <!-- "show-close-2" -->
</div>

CSS：

.enable-btns-2 > .dropdown {
  display = "block";
}

.enable-btns-2 > .icon {
  display = "none";
}

...

JS：

document.getElementById("show-2").onclick = function() {
  document.getElementById("btn-wrapper-2").classList.toggle("enable-btns-2");
}