css - 没有animate.css的PURE CSS3上下左右滑动过渡

Question

我正在构建一个纯文本菜单(客户要求)，因为他们的一些客户需要在不打开 JS 的情况下进行导航。该菜单适用于所有预期目的，但我想通过将 CSS3 过渡添加到菜单下拉菜单在悬停时的方式和在第 3 级(也在悬停时)向右飞出的方式来“美化”它。

我尝试将以下内容应用于 <ul>这将采取行动

.mymenu ul li:hover ul {
   opacity: 1;
   height: auto;
   overflow: visible;
   width: auto;  
   min-width: 190px;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
   }

那没有任何作用(否则我不会在这里，现在是吗？哈哈)

本质上，我希望有人为我解决这个问题，并在可能的情况下解释。不要急于快速回答而错过问题已回答的复选标记。我会检查它肯定:)

我需要一个动画下拉效果，但需要一个非动画的下拉关闭效果，这样它才能跟上用户的速度。和三级子菜单左右一样的效果

我创建了一个 CODEPEN给你。

如果您想更好地了解我在寻找什么，您可以查看 LinkedIn 菜单，您还会在那里看到下拉效果。

非常感谢!

Answer 1

您的问题是您正在使用 display 来显示/隐藏您的菜单 + 子菜单。这不起作用，因为它们就像一个 bool 值:打开或关闭 - 即没有“中间”值供您选择。

---

那么，可能的解决方案是什么？好吧，我已经替换了你对 display: 的使用，并将其更改为 opacity:，确实具有中间值，因此 < em>可以很好地过渡。

所以，基础知识是:

• 将 display: none 替换为 opacity:0
• 将 display: inline 替换为 opacity:1

---

演示

.mymenu {
  background: #0067A5;
  box-shadow: 0px 4px 17px #000;
  border-top: 1px solid #666;
  height: 35px;
  position: fixed;
  top: 55px;
  width: 100%;
  z-index: 99;
  background: #0067A5;
  box-shadow: 0px 4px 17px #000;
  border-top: 1px solid #666;
  width: 570px;
  margin-left: 425px;
}
ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 0;
  margin-bottom: 10px;
}
a {
  text-decoration: none;
}
ul li {
  position: relative;
  display: block;
  padding-bottom: 2px;
  margin: 0 -5px;
}
li.retrodropdown {
  height: 50px;
}
.mymenu ul li a {
  position: relative;
  display: inline-block;
  padding: 0px 18px 0px 8px;
  font-weight: 700;
  margin-top: 6px;
  text-transform: uppercase;
  font-family: open sans !important;
  font-size: 13px;
  color: #333;
  border-left: 1px solid #fff;
}
.mymenu .retrodropdown-menu {
  padding-bottom: 15px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding-top: 15px;
  top: 32px;
  left: 4px;
}
.retrodropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  opacity: 0;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.retrodropdown:hover .retrodropdown-menu {
  opacity: 1;
}
.retrodropdown-menu li {
  width: 100%;
  padding-bottom: 0;
  border-bottom: 1px solid #E0871A;
}
.mymenu ul li ul li {
  margin: 0;
  height: 30px;
  display: inline-block;
}
.mymenu ul li {
  position: relative;
  display: block;
  float: left;
  padding-bottom: 2px;
  margin: 0 -5px;
  z-index: 999;
}
.mymenu ul li:first-child a {
  border-left: none;
}
.mymenu li:last-child {
  border-bottom: none;
}
.mymenu ul li ul li ul {
  opacity: 0;
  left: 192px;
  position: relative;
  top: -25px;
  background: #fff;
  width: 155px;
  height: 150px;
  border: 1px solid #ccc;
}
.retrodropdown-menu li:not(.header):hover,
.jg-header-navigation .retrodropdown-menu > li > a:hover {
  background-color: #0067A5;
}
.mymenu ul li ul li:hover ul {
  opacity: 1;
}
.mymenu ul li ul {
  width: auto;
  min-width: 190px;
}
.mymenu ul li:hover ul {
  opacity: 0;
  height: auto;
  overflow: visible;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

<div class="mymenu">
  <ul>
    <li class="retrodropdown" aria-haspopup="true">
      <a id="RetroHeader_HyperLink7">Career Services</a>
      <ul class="retrodropdown-menu">
        <li><a href="#">Education</a>
        </li>
        <li><a href="#">Resume Help</a>
        </li>
        <li><a href="#">Promote Yourself</a>
        </li>
        <li class="flyout-menu"><a href="#">Career Tools</a>
          <ul class="fadeInLeft animated">
            <li><a href="#">Skills Assessment</a>
            </li>
            <li><a href="#">Career Videos</a>
            </li>
            <li><a href="#">Career Exploration</a>
            </li>
            <li><a href="#">Interview Training</a>
            </li>
            <li><a href="#">Military Translator</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</div>

---

弹出菜单 demo - IMO 不像 fade 好看

通常将宽度设置为 0，然后在悬停时更改它。过渡的使用允许将其动画化。