如何在 CSS 的菜单栏上制作 animation

Question

如何制作我的导航栏，按下我的 div 按钮时有一个幻灯片 animation。

我创建了 java 脚本 function 因为它通常会显示出来，但是让它从无处弹出有点烦人。我希望它显示并从顶部缓慢滑动 2-3 秒。 我尝试在包含所有（导航列表）的 class 上使用以下代码，但没有成功：

 const toggleButton = document.querySelector('.dot_a'); const navbarLinks = document.querySelector('.nav-list'); toggleButton.addEventListener('click', () => { navbarLinks.classList.toggle('active') })

 body { background-image: url(1.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0; }.pro_column1 { width: 15%; }.pro_column2 { width: 85%; }.nav { overflow: hidden; background-color: white; /*opacity: 60%;*/ margin: 10px; border-radius: 10px; width: 850px; /*background:#3c6382; /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/ /*border: solid black 2px;*/ }.nav a { color: #747d8c; text-align: center; padding: 35px 10px; text-decoration: none; font-size: 17px; margin: 0; border-radius: 10px; transition: 1s; }.nav a:hover { background-color: #ddd; color: black; -webkit-animation: 1s ease-in forwards; }.dot_a { padding: 30px 10px; font-size: 17px; text-align: center; margin: 0; display: inline-block; border-radius: 10px; transition: 1s; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } i { /*float: right;*/ font-size: 20px; border: none; outline: none; color: #747d8c; padding: 32px 5px; font-family: inherit; margin: 0px; border-radius: 20px; transition: 1s; }.dot { height: 15px; width: 15px; border-radius: 50%; display: inline-block; margin: 0px; }.column { float: left; width: 33.33%; padding: 10px; height: 300px; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 870px) {.nav a { padding-top: 5px; padding-bottom: 5px; display: block; }.dot_a { padding-top: 3px; padding-bottom: 0px; }.nav { width: 90%; }.dot { margin-top: 15px; margin-bottom: 15px; }.nav-list { display: none; transform: translateX(100%); transition: transform 1s ease-in; }.nav-list.active { display: block; margin: 0; padding: 0; transform: translateX(0%); } }

 <script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script> <center> <nav class="nav"> <div class="dot_a"> <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span> <span class="dot" style="background-color: #ff4757;"></span> <span class="dot" style="background-color: #ffa502"></span> <span class="dot" style="background-color: #2ed573;"></span> </div> <span class="nav-list"> <a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a> <a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a> <a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a> <a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a> <a class="anchors" href="#"><i class="far fa-address-card "></i>&nbsp;&nbsp;ЗА НАС</a> </span> </nav> </center>

Answer 1

  .nav-list{
    display: block;
    transform: translateX(100%);
    transition: transform 1s ease-in;
    opacity: 0;
    visibility: hidden;
    
  }

  .nav-list.active {
    margin: 0;
    padding: 0;
    transform: translateX(0%);
     opacity: 1;
    visibility: visible;
  }

您必须更换此 css 并检查。