JS动画的可见性：隐藏的口吃

Question

function hideContent(){
      document.getElementById('content').style.visibility = 'hidden';
      }

      function showContent(){
      document.getElementById('content').style.visibility = 'visible';
      }

<div class="content" id="content">

    <p class="date">25 mei 2019</p>
    <p class="location">Hennemeeuwis Neerpelt</p>
    <h1>Masquarade Classix </h1>
    <ul class="lineup">
        <li>Nina Kraviz</li>
        <li>Recondite</li>
        <li>Mind Against</li>
        <li>Âme</li>
        <li>Vince Watson</li>
        <li>Kölsch</li>
        <li>Rodriguez Jr. </li>
        <li></li>
    </ul>
<div class="clear"></div>

    <a href="#" class="button white">Buy Tickets</a>
    <a onclick="openNav()" href="#" class="button black">More Information</a>

</div>

我正在将div设置为visability:hidden的动画，但是div中的按钮存在怪异的滞后/停顿，因为它们会异步消失。签出托管在这里：http://setup.industries/masquarade/

我们还在讨论这个话题时，有人可以为我指出正确的方向，如何在香草JS中为这些动画添加淡入淡出吗？

谢谢！

  function hideContent(){
  document.getElementById('content').style.visibility = 'hidden';
  }

  function showContent(){
  document.getElementById('content').style.visibility = 'visible';
  }

Answer 1

如果您正在寻找有关淡入淡出的答案，可以查看这篇Fades文章，它解释了如何使用CSS和JS和JS淡入和淡出。