html - 下拉动画不起作用。它所显示的只是一个简单的出现和消失

Question

我不完全确定它是否可行，但我尝试在我的下拉菜单上使用过渡，但它似乎不起作用，我也不知道为什么。

我已经尝试更改放置转换调用的位置，但似乎没有任何效果。它只是一个简单的出现和消失的事情。我试图在不使用 @keyframes 或任何 javascript rn 和纯 CSS 的情况下执行此操作。

当我将鼠标悬停在它上面时，我需要它向下滑动。

function openNav() {
  document.getElementById("sideNav").style.width = "400px";
  document.getElementById("main").style.marginLeft = "400px";
  //document.body.style.backgroundColor = "rgba(0,0,0,0.6)"
}

function closeNav() {
  document.getElementById("sideNav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "#FFF";
}

.sideNav {
  height: 100%;
  width: 0;
  /*Will change this part with js*/
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #3037af;
  overflow-x: hidden;
  padding-top: 150px;
  transition: 0.5s;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
}

.sideNav a {
  padding: 20px;
  display: block;
  color: #f9f9f9;
  text-decoration: none;
  font-size: 32px;
  opacity: 0.5;
  transition: 0.3s;
  font-family: 'Raleway', sans-serif;
  transition-duration: 0.5s;
}

.sideNav a:hover {
  opacity: 1;
  font-size: 40px;
  padding: 10px;
  transition: 0.4s;
}

.dropdown {
  overflow: hidden;
}

.dropdownContent {
  display: none;
  background-color: #2d347d;
  position: relative;
  padding: 10px;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
  z-index: 1;
}

.dropdownContent a {
  left: 200px;
  display: block;
  transition: ease-in 0.3s;
  transition-delay: 0.300ms;
}

.dropdown:hover .dropdownContent {
  display: block;
}

<div class="mainContainer">
  <div id="sideNav" class="sideNav">
    <script src="js/main.js"></script>
    <div class="dropdown">
      <a href="#"><i class="fas fa-gifts"></i> Products</a>
      <div class="dropdownContent">
        <a href="#">Shop Now</a>
        <a href="#">Store Locations</a>
      </div>
    </div>
  </div>
</div>
<nav>
  <button id="menu" onclick="openNav()" onfocusout="closeNav()"><i class="fas fa-bars"></i></button>
  <div id="main">
    <h1 class="landingHead">invision.</h1>
  </div>
</nav>

Answer 1

.sideNav {
  height: 100%;
  /*width: 0;   Will change this part with js*/
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #3037af;
  overflow-x: hidden;
  padding-top: 150px;
  transition: 0.5s;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
}

.sideNav a {
  padding: 20px;
  display: block;
  color: #f9f9f9;
  text-decoration: none;
  font-size: 32px;
  opacity: 0.5;
  transition: 0.3s;
  font-family: 'Raleway', sans-serif;
  transition-duration: 0.5s;
}

.dropdown {
  position: relative;
  height: 100px;
}

.dropdownContent {
  background-color: #2d347d;
  position: relative;
  padding: 10px;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
  z-index: -1;
  opacity: 0;
  top: -100%;
}

.dropdown:hover .dropdownContent {
  top: 0;
  opacity: 1;
  transition: ease-in 0.3s;
  transition-delay: 0.300ms;
}

.dropdown:hover .dropdownContent {
  top: 0;
  opacity: 1;
  transition: ease-in 0.3s;
  transition-delay: 0.300ms;
}

<div class="mainContainer">
  <div id="sideNav" class="sideNav">
    <div class="dropdown">
      <a href="#"><i class="fas fa-gifts"></i> Products</a>
      <div class="dropdownContent">
        <a href="#">Shop Now</a>
        <a href="#">Store Locations</a>
      </div>
    </div>
  </div>
</div>

这肯定可以通过整理和稍微调整来实现，但基本上，您需要先设置所有默认位置，即悬停之前的状态。根据您的问题，我了解到您希望它们从顶部滑入，因此您需要将默认位置调整为您希望动画开始的位置。在 :hover css 属性中，当您将鼠标悬停在链接上时，您可以使用您希望的最终位置覆盖这些位置。

根据要求，这是一个纯CSS实现。