我使用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">
      	<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：您在显示之间过渡：block和display：none，它立即隐藏/显示链接。显示属性不能动画，因此您不应将其更改为动画的一部分。如果我离开它总是设置为显示：块。

      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">
      	<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>