我使用Javascript更改CSS，转换是瞬时的，而不是花费几秒钟

Question

我有一个下拉导航菜单，我想要更改CSS样式（特别是导航链接的不透明度，使它们淡入），并且样式已正确更改，除了样式值之间没有转换

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

＆＃13;

＆＃13;

      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;
        }
      })

＆＃13;

      #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;
      }

＆＃13;

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

  

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题实际上是#navbarLinkList：你在display：block和display：none之间转换它，它会立即隐藏/显示链接。 display属性无法设置动画，因此您不应将其更改为动画的一部分。如果我将它保留为总是设置为显示：阻止。

＆＃13;

＆＃13;

      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;
        }
      })

＆＃13;

      #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;
      }

＆＃13;

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

  

＆＃13;

＆＃13;

＆＃13;