javascript - 我使用 Javascript 更改 CSS，转换是即时的，而不是需要几秒钟

Question

我有一个下拉导航菜单，我想更改它的 CSS 样式(特别是导航链接的不透明度，以便它们淡入)，并且样式已正确更改，除了样式值之间没有过渡.

我正在尝试对不透明度的变化使用过渡，以便在下拉菜单位于导航链接后面时使导航链接淡入 View 。

      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 有关:您在 display:block 和 display:none 之间转换它，这会立即隐藏/显示链接。 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">
      	<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>