我使用Javascript更改CSS，并且过渡是瞬间的，而不是花几秒钟的时间

Question

我有一个下拉导航菜单，我想更改CSS样式（特别是导航链接的不透明度，使其淡入），以及除了样式值之间没有转换之外，样式可以正确更改。

我试图在不透明度的变化上使用一个转换，以便导航链接在下拉菜单后面淡入视图。

 var notViewingMenu = true; 
 
     var button = document.getElementById("navList"); 
 
     var view = document.getElementById("navbarLinkList"); 
 
     var dropMenu = document.getElementById("navbarLinks"); 
 
     var navPath = document.getElementById("navListPath"); 
 
     var links = document.getElementsByClassName("navLink"); 
 

 
     button.addEventListener('click', function(){ 
 
     if (notViewingMenu) { 
 
      links[0].style.opacity = "1.0"; 
 
      links[1].style.opacity = "1.0"; 
 
      links[2].style.opacity = "1.0"; 
 
      links[3].style.opacity = "1.0"; 
 
      view.style.display = "block"; 
 
      navPath.style.fill = "D90000"; 
 
      dropMenu.style.height = "100vh"; 
 
      notViewingMenu = false; 
 
     } else { 
 
      links[0].style.opacity = "0.0"; 
 
      links[1].style.opacity = "0.0"; 
 
      links[2].style.opacity = "0.0"; 
 
      links[3].style.opacity = "0.0"; 
 
      view.style.display = "none"; 
 
      navPath.style.fill = "#000000"; 
 
      dropMenu.style.height = "0vh"; 
 
      notViewingMenu = true; 
 
     } 
 
     })

 #navbarLinkList { 
 
     padding-top: 44px; 
 
     list-style: none; 
 
     display: none; 
 
     width: 100vw; 
 
     height: 100vh; 
 
     z-index: 44; 
 
     } 
 

 
     #navbarLinks { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     height: 0vh; 
 
     width: 100vw; 
 
     background-color: rgba(0,0,0,.9); 
 
     list-style: none; 
 
     position: absolute; 
 
     float: left; 
 
     z-index: -10; 
 
     transition: height 1s; 
 
     -o-transition: height 1s; 
 
     -moz-transition: height 1s; 
 
     -webkit-transition: height 1s; 
 
     } 
 

 
     .navLink { 
 
     opacity: 0.0; 
 
     position: relative; 
 
     font-size: 7vw; 
 
     font-family: 'helvetica'; 
 
     list-style: none; 
 
     color: white; 
 
     text-decoration: none; 
 
     transition: opacity 2s; 
 
     -o-transition: opacity 2s; 
 
     -moz-transition: opacity 2s; 
 
     -webkit-transition: opacity 2s; 
 
     }

<navbar> 
 
     <svg id="navList"> 
 
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
      <path id="navListPath" d="M0,0 L19,0 L19,2 L0,2 L0,0 Z M0,7 L19,7 L19,9 L0,9 L0,7 Z M0,14 L19,14 L19,16 L0,16 L0,14 Z" id="Combined-Shape" fill="#000000"></path> 
 
     </g> 
 
     </svg> 
 
     <nav id="navbarLinks"> 
 
     \t <ul id="navbarLinkList"> 
 
      <li><a class="navLink" href="../index.html">home</a></li> 
 
      <li><a class="navLink" href="index.html">team</a></li> 
 
      <li><a class="navLink" href="index.html">portfolio</a></li> 
 
      <li><a class="navLink" href="index.html">submission</a></li> 
 
     </ul> 
 
     </nav> 
 
    </navbar> 
 

 

Answer 1

的问题实际上是#navbarLinkList：你显示器之间的转换是：块显示：没有，这是瞬间隐藏/显示的链接。 display属性不能动画，所以你不应该将它作为动画的一部分进行更改。如果我将其设置为始终显示：block，则渐隐效果会起作用。

 var notViewingMenu = true; 
 
     var button = document.getElementById("navList"); 
 
     var view = document.getElementById("navbarLinkList"); 
 
     var dropMenu = document.getElementById("navbarLinks"); 
 
     var navPath = document.getElementById("navListPath"); 
 
     var links = document.getElementsByClassName("navLink"); 
 

 
     button.addEventListener('click', function(){ 
 
     if (notViewingMenu) { 
 
      links[0].style.opacity = "1.0"; 
 
      links[1].style.opacity = "1.0"; 
 
      links[2].style.opacity = "1.0"; 
 
      links[3].style.opacity = "1.0"; 
 
      //view.style.display = "block"; 
 
      navPath.style.fill = "D90000"; 
 
      dropMenu.style.height = "100vh"; 
 
      notViewingMenu = false; 
 
     } else { 
 
      links[0].style.opacity = "0.0"; 
 
      links[1].style.opacity = "0.0"; 
 
      links[2].style.opacity = "0.0"; 
 
      links[3].style.opacity = "0.0"; 
 
      //view.style.display = "none"; 
 
      navPath.style.fill = "#000000"; 
 
      dropMenu.style.height = "0vh"; 
 
      notViewingMenu = true; 
 
     } 
 
     })

 #navbarLinkList { 
 
     padding-top: 44px; 
 
     list-style: none; 
 
     display: block; 
 
     width: 100vw; 
 
     height: 100vh; 
 
     z-index: 44; 
 
     } 
 

 
     #navbarLinks { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     height: 0vh; 
 
     width: 100vw; 
 
     background-color: rgba(0,0,0,.9); 
 
     list-style: none; 
 
     position: absolute; 
 
     float: left; 
 
     z-index: -10; 
 
     transition: height 1s; 
 
     -o-transition: height 1s; 
 
     -moz-transition: height 1s; 
 
     -webkit-transition: height 1s; 
 
     } 
 

 
     .navLink { 
 
     opacity: 0.0; 
 
     position: relative; 
 
     font-size: 7vw; 
 
     font-family: 'helvetica'; 
 
     list-style: none; 
 
     color: white; 
 
     text-decoration: none; 
 
     transition: opacity 2s; 
 
     -o-transition: opacity 2s; 
 
     -moz-transition: opacity 2s; 
 
     -webkit-transition: opacity 2s; 
 
     }

<navbar> 
 
     <svg id="navList"> 
 
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
      <path id="navListPath" d="M0,0 L19,0 L19,2 L0,2 L0,0 Z M0,7 L19,7 L19,9 L0,9 L0,7 Z M0,14 L19,14 L19,16 L0,16 L0,14 Z" id="Combined-Shape" fill="#000000"></path> 
 
     </g> 
 
     </svg> 
 
     <nav id="navbarLinks"> 
 
     \t <ul id="navbarLinkList"> 
 
      <li><a class="navLink" href="../index.html">home</a></li> 
 
      <li><a class="navLink" href="index.html">team</a></li> 
 
      <li><a class="navLink" href="index.html">portfolio</a></li> 
 
      <li><a class="navLink" href="index.html">submission</a></li> 
 
     </ul> 
 
     </nav> 
 
    </navbar>