为什么我的转换：转换不能反向工作？

Question

我的导航转换没有反向工作。我不确定如何应用任何反向属性，或者它是否是一个更简单的修复。也许还有另一个影响这一点的属性。 "is-active" 属性是通过切换通过 JS 应用的。

任何帮助将不胜感激，谢谢。

JS

        navLinks.classList.toggle("is-active");

这里是html

        <nav>
          <ul class="nav-links">
            <li><a href="index.php">home</a></li>
            <li><a href="travel.php">travel</a></li>
            <li><a href="photos.php">photos</a></li>
            <li><a href="life.php">about</a></li>
          </ul>
        </nav>

CSS

        nav {
         width: 100vw;
         overflow: hidden;
         left: 0;
         margin-top: 18px;
         height: 0;
         transition: height ease-in-out 0.5s;

         .nav-links {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: flex-start;
         opacity: 1;
         /* only to show when class is added */
         background-color: black;
         margin: 0;
         padding: 0;
         padding-top: 15px;
         list-style: none;
         overflow: hidden;
         -webkit-transition: -webkit-transform 1s;
         transition: -webkit-transform 1s;
         transition: transform 1s;
         transition: transform 1s, -webkit-transform 1s;
         -webkit-transform: translateY(-100%);
         transform: translateY(-100%);
         }
        }

        nav.is-active {
        height: 100vh;
        }

        .nav-links.is-active {
          opacity: 1;
          /*only shows when class is added */
          -webkit-transform: translateY(0);
          transform: translateY(0);
          height: 100vh;
        }

Answer 1

尝试将 nav 和 nav-links 上的相同转换规则添加到 nav.is-active 和 nav-links.is-active。你必须在两个类上都有相同的转换规则，它才能平滑地来回移动。