遍历媒体查询断点会导致不必要的过渡效果

Question

我为较小的屏幕创建了一个下拉导航菜单，使一个元素可单击以运行JS脚本并将CSS显示属性从无切换为阻止。效果很好，但我想添加动画效果，以便导航菜单可以淡入（不只是出现）。我使用了不透明度和可见性。它运作良好，但是在调整浏览器窗口大小时会产生奇怪的副作用...

在通过下拉菜单从大到小的遍历媒体查询断点时，其内容会淡入一会儿，然后逐渐消失。我一直在黑暗中射击，试图将其分类太多小时。在此先感谢您的任何建议。

这是一个可行的示例... https://jsfiddle.net/saulnewbury/y0gfwj7z/21/

我也将代码放在这里...

HTML

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>

        <div class="topnav" id="myTopnav"> 
          <a id="b" class="nav-items liveshows" href="#liveshows">live shows</a>
        </div> 

CSS

 @media screen and (max-width: 500px) {

  .topnav {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 45px;
    padding-top: 0px;  
    padding-bottom: 10px;
    z-index: -1;
    visibility: hidden;
    opacity: 0;   
    background-color: rgb(0, 0, 0, 0.1);
    -webkit-transition:700ms ease;
    -moz-transition:700ms ease;
    -o-transition:700ms ease;
    transition:700ms ease;
    }

  .topnav.responsive   {
    visibility: visible;
    opacity: 1;
  }


}

JavaScript

function myFunction() {
      document.getElementById("myTopnav").classList.toggle('responsive');
    }