使用CSS向子菜单添加淡入效果

Question

我有一个简单的问题。我正试图像本页中那样在子菜单中添加淡入效果，但我并不完全理解ul li ul选择器的概念，因此它并不正确。，

这似乎并不难，但我做错了什么，我想不通！！

如何添加此CSS转换效果？我已经尝试过使用animate.css库，但该库的使用不是强制性的，我可以接受不使用它的解决方案。

.classname li:hover > ul{
  display:block;
  -moz-animation: fadeInUp .3s ease-in  ;
  -webkit-animation: fadeInUp .3s ease-in ;
  animation:fadeInUp .3s ease-in ;
}
.classname ul li:hover > ul{
  display:block;
  -moz-animation: fadeInRight .3s ease-in ;
  -webkit-animation: fadeInRight .3s ease-in ;
  animation:fadeInRight .3s ease-in ;
}

演示：下面是我当前尝试编码的片段。

/* MENU NAVIGATION */
#nav span {
  display: none;
}
#nav,
#nav ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
#nav {
  font-family: 'Josefin Sans', sans-serif;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
  width: 98%;
}
#nav ul.subs {
  background-color: #FFFFFF;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  color: #333333;
  display: none;
  left: 0;
  padding: 2%;
  position: absolute;
  top: 54px;
  width: 96%;
}
#nav > li {
  border-bottom: 5px solid transparent;
  float: left;
  margin-bottom: -5px;
  text-align: left;
  -moz-transition: all 300ms ease-in-out 0s;
  -ms-transition: all 300ms ease-in-out 0s;
  -o-transition: all 300ms ease-in-out 0s;
  -webkit-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;
}
#nav li a {
  display: block;
  text-decoration: none;
  -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  white-space: normal;
}
#nav > li > a {
  color: #333333;
  display: block;
  line-height: 49px;
  padding: 0 15px;
  text-transform: uppercase;
}
#nav > li:hover > a,
#nav > a:hover {
  background-color: #F55856;
  color: #FFFFFF;
}
#nav li.active > a {
  background-color: #333333;
  color: #FFFFFF;
}
/* submenu */
#nav li:hover ul.subs {
  display: block;
}
#nav ul.subs > li {
  display: inline-block;
  float: none;
  padding: 10px 1%;
  vertical-align: top;
  width: 33%;
}
#nav ul.subs > li a {
  color: #777777;
  line-height: 20px;
}
#nav ul li a:hover {
  color: #F55856;
}
#nav ul.subs > li > a {
  font-size: 1.3em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#nav ul.subs > li li {
  float: none;
  padding-left: 8px;
  -moz-transition: padding 150ms ease-out 0s;
  -ms-transition: padding 150ms ease-out 0s;
  -o-transition: padding 150ms ease-out 0s;
  -webkit-transition: padding 150ms ease-out 0s;
  transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
  padding-left: 15px;
}

<div class="container">
  <ul id="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#s1">Prodotti</a>
      <span id="s1"></span>
      <ul class="subs">
        <li><a href="#">Header a</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Header b</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Area Privata</a>
    </li>
    <li><a href="#">Contatti</a>
    </li>
  </ul>
</div>

Answer 1

不需要动画或单独的库来实现所需的效果。这些可以通过使用转换和一些CSS转换来实现。

演示：（下面提供解释）。

/* MENU NAVIGATION */
#nav span {
  display: none;
}
#nav,
#nav ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
#nav {
  font-family: 'Josefin Sans', sans-serif;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
  width: 98%;
}
#nav ul.subs {
  background-color: #FFFFFF;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  color: #333333;
  left: 0;
  padding: 2%;
  position: absolute;
  top: 54px;
  width: 96%;
}
#nav > li {
  border-bottom: 5px solid transparent;
  float: left;
  margin-bottom: -5px;
  text-align: left;
  transition: all 300ms ease-in-out 0s;
}
#nav li a {
  display: block;
  text-decoration: none;
  transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  white-space: normal;
}
#nav > li > a {
  color: #333333;
  display: block;
  line-height: 49px;
  padding: 0 15px;
  text-transform: uppercase;
}
#nav > li:hover > a,
#nav > a:hover {
  background-color: #F55856;
  color: #FFFFFF;
}
#nav li.active > a {
  background-color: #333333;
  color: #FFFFFF;
}
/* submenu */
#nav ul.subs > li {
  display: inline-block;
  float: none;
  padding: 10px 1%;
  vertical-align: top;
  width: 33%;
}
#nav ul.subs > li a {
  color: #777777;
  line-height: 20px;
}
#nav ul li a:hover {
  color: #F55856;
}
#nav ul.subs > li > a {
  font-size: 1.3em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#nav ul.subs > li li {
  float: none;
  padding-left: 8px;
  transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
  padding-left: 15px;
}
#nav > li > ul {
  opacity: 0;
  transform: translateY(25%);
  transition: all 150ms ease;
  pointer-events: none;
}
#nav > li:hover > ul {
  opacity: 1;
  transform: translateY(0%);
  pointer-events: auto;
}
#nav > li > ul > li > ul {
  opacity: 0;
  transform: translateX(50%);
  transition: all 150ms ease;
}
#nav > li > ul > li:hover > ul {
  opacity: 1;
  transform: translateX(0%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <ul id="nav">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#s1">Prodotti</a>
      <span id="s1"></span>
      <ul class="subs">
        <li><a href="#">Header a</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Header b</a>
          <ul>
            <li><a href="#">Submenu x</a>
            </li>
            <li><a href="#">Submenu y</a>
            </li>
            <li><a href="#">Submenu z</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Area Privata</a>
    </li>
    <li><a href="#">Contatti</a>
    </li>
  </ul>
</div>

---

代码解释：

为了产生与您链接的页面类似的效果（即，第一级子菜单在悬停时进行淡入+向上移动，第二级子菜单则在悬停时执行淡入+向左移动），需要执行以下操作：

• 当前，将鼠标悬停在PRODOTTI上时，您正在切换包含一级子菜单的ul的display属性。但是display属性值的更改是不可转换的，因此子菜单将立即出现。只需移除导致此问题的线路

#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    /*display: none; comment out or remove this line */
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
/* remove these */
#nav li:hover ul.subs {
  display: block;
}

• 之后，将包含子菜单的ul的初始状态设置为具有opacity: 1，并将transform: translateY(25%)添加到其中。这将使子菜单的容器下降其高度的25%

#nav > li > ul{
  opacity: 0;
  transform: translateY(25%);
  transition: all 150ms ease;
  pointer-events: none;
}

• 当PRODOTTI链接悬停时，将子菜单的opacity更改为1，并通过设置"transform:translateY（0%）"将其平移回原始位置。这使得子菜单看起来好像在逐渐消失，同时又在向上移动

#nav > li:hover > ul{
  opacity: 1;
  transform: translateY(0%);
  pointer-events: auto;
}

• 对于第二级子菜单，遵循相同的步骤，只是我们使用的不是translateY，而是translateX，因为它必须向右移动，而不是向下移动

#nav > li > ul > li > ul{
  opacity: 0;
  transform: translateX(50%);
  transition: all 150ms ease;
}
#nav > li > ul > li:hover > ul{
  opacity: 1;
  transform: translateX(0%);
}