javascript - 制作带有过渡的动画菜单？

Question

我正在尝试制作一个动画菜单，我想用 CSS 来做，但如果不可能的话，还有 javascript 或 Jquery。

.nav {
  text-align: right;
  height: 100%;
  width: 17%;
  position: absolute;
  box-shadow: -1px 4px 28px 0px rgba(0, 0, 0, 0.75);
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}

.menu {
  margin: 0;
  width: 100%;
  height: 95%;
  text-align: left;
  overflow: auto;
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}

.menu a {
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 2px 2px 5px black;
  line-height: 26px;
  padding: 5px;
  border-left: 4px solid;
  margin: 0 0 0 0;
  margin-top: 5%;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .1s;
  transition: all .1s;
  cursor: pointer;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-align: center;
  align-items: center;
  color: white;
}


/**** */

a:hover {
  border-left: 5px solid #b93632;
  color: #b93632;
}

span:hover {
  color: yellow;
}

/**** */

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}

@media screen and (max-width:800px),
screen and (max-height: 500px) {
  .nav {
    text-align: right;
    height: 70px;
    width: 100%;
    line-height: 70px;
    position: relative;
    z-index: 1;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
    overflow: auto;
  }
  #toggle:checked+.menu {
    display: block;
    height: 400px;
  }
}

<div class="nav">

  <label for="toggle"><i class="fas fa-users"></i></label>
  <input type="checkbox" id="toggle" />
  <div class="menu" id="users">
    <center><span>Utenti online:&nbsp;</span><span id="n_utenti"> 0</span></center>
    <input type="text" id="cerca_utenti" onkeyup="Cerca()" placeholder="Cerca un utente">

    <ul id="utenti_lista">
    </ul>
  </div>


</div>

我就是不能让它变成动画，这就是它的工作原理，但它没有动画，没有过渡，怎么做？ 我现在改变了，因为 CSS 不是很好理解。有媒体quieres 和常规菜单。

标签： javascripthtmlcss

Answer 1

您可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/transition上有关 css 动画的 mdn 文档。在您的情况下，您不能将动画应用于显示属性，但是您可以将动画添加到不透明度，这实际上看起来像淡入/淡出动画。

这是小提琴https://jsfiddle.net/e90dL586/我已经为你更新了不透明度。

#toggle + .menu {
    text-align: center;
    width: 100%;
    opacity: 0;
    overflow: auto;     
}
#toggle:checked + .menu {
    opacity: 1;
    transition: opacity 1s;
    height:400px;       
}

有关更多效果，请参阅 mdn 文档。