css转换在与javascript一起使用时不起作用

Question

我知道这是一个新手犯的错误，但还是弄不明白。因此，我使用css创建了一个汉堡按钮，我不认为代码是必要的，但基本上当我单击它时，我编写了一个js脚本，它将弹出一个导航栏

<div class="hamburger-menu">
  <ul class="nav-links text-center">
    <li><a href="#header" class="nav-link">Home</a></li>
    <li><a href="#search" class="nav-link">Search</a></li>
    <li><a href="#popular-places" class="nav-link">Popular Places</a></li>

    <li><a href="#gallery" class="nav-link">Gallery</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</div>

这是html代码，js运行得很好。所有我想要的是添加一个过渡，以便当类.hamburger-menu弹出时，会有一个平滑的淡入淡出效果，但没有任何工作。

.hamburger-menu {
transition: 0.3s ease-in;
}

这有什么问题吗？我试了很多次，但这似乎是唯一正确的解决方案，但仍然不起作用

当我单击汉堡包按钮时，它会将一个名为open-nav的类添加到html中，我也试图在此处添加转换，但仍然没有结果

Answer 1

如何添加用户悬停过渡：

<div class="hamburger-menu">
  <ul class="nav-links text-center">
    <li><a href="#header" class="nav-link">Home</a>    </li>
    <li><a href="#search" class="nav-link">Search</a>    </li>
    <li><a href="#popular-places" class="nav-    link">Popular Places</a></li>

    <li><a href="#gallery" class="nav-link">Gallery</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</div>

和CSS：

.nav-link:hover {
    width: 300px;
    color: lightblue;
    transition: ease 0.2s;
}