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

Question

我有一个简单的问题。我正在尝试向 this page 中的子菜单添加淡入效果，但我不太了解 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>

代码解释：

为了产生类似于您 link 页面中的效果（即，第一级子菜单执行 fade-in + 悬停时向上移动，第二级 sub-menu 做一个 fade-in + 悬停时向左移动），需要做以下事情：

当前，当悬停在 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 link 悬停时，将子菜单的 opacity 更改为 1，并通过设置 `transform: translateY(0%) 将其平移回原来的位置。这使得子菜单看起来好像是 fading-in 并且同时向上移动。

#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%);
}

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

Adding a fade-in effect to submenu using CSS

css

css-transitions

css-animations

animate.css