html - 逆转 CSS3 过渡延迟

Question

我有一个嵌套列表，我想在用户将鼠标悬停在父列表项上时显示它。我是从左边移动的列表，当它处于下拉列表的位置时。我能够做到这一点，但是当用户取消悬停时，我想在它向左移动之前反向下拉，但我所做的一切都会导致列表在下拉反向之前向后移动。

任何人都可以帮助我正确地取消悬停顺序。

.mainmenu li ul li{
    width:263px;
}

.mainmenu ul li ul{
    margin-left: 0;
    max-height:61px;
    overflow: hidden;
    -webkit-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    -moz-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    -o-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    -ms-transition: margin-left 0.3s ease-in, max-height 1s ease-in 1s;
    transition: margin-left 0.3s ease-in, max-height 0.3s ease-in 1s;
}

.mainmenu li:hover ul{
    margin-left: 262px;
    max-height: 999px;
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
    -ms-transition-duration:1s;
    transition-duration:1s;
    -webkit-transition-delay: margin-left 1s, max-height 0;
    -moz-transition-delay: margin-left 1s, max-height 0;
    -o-transition-delay: margin-left 1s, max-height 0;
    -ms-transition-delay: margin-left 1s, max-height 0;
    transition-delay: margin-left 1s, max-height 0;
}

JSFiddle Demo

Answer 1

根据我的理解，以下是您要查找的内容:

.mainmenu ul li ul {
  margin-left: 0;
  max-height: 61px;
  overflow: hidden;
  transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
}
.mainmenu ul li:hover ul {
  margin-left: 262px;
  max-height: 999px;
  transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
}

上面的代码做了以下事情:

• 当 li 悬停时，ul 的 margin-left 会立即转换，需要 0.3 秒才能完成.
• 因为下拉菜单应该只在移动完成后展开，所以应该在 max-height 属性的过渡中添加 0.3 秒的延迟。
• 因此，在 0 到 0.3 秒之间，ul 向右移动，然后在 0.3 到 1.3 秒之间，内容开始下拉。
• 要在悬停时发生相反的情况，max-height 应该在默认选择器(未悬停状态)上立即转换。这应该发生到 1 秒标记。
• 只有在下拉菜单反转后，margin-left 才应该反转，因此应该为 margin-left 属性的转换添加 1 秒的延迟.
• 因此，在悬停时 0 到 1 秒之间，ul 折叠，然后在 1 到 1.3 秒之间它移回其原始位置。

.mainmenu ul {
  background-color: #274569;
  background-image: -moz-linear-gradient(top, #274569, #1a256f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#274569), to(#1a256f));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#274569, endColorStr=#1a256f);
}
.mainmenu li {
  background-color: #274569;
  background-image: -moz-linear-gradient(top, #274569, #1a256f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#274569), to(#1a256f));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#274569, endColorStr=#1a256f);
}
.mainmenu li a {
  background-color: #274569;
  background-image: -moz-linear-gradient(top, #274569, #1a256f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#274569), to(#1a256f));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#274569, endColorStr=#1a256f);
  color: #ffffff;
}
.mainmenu li a:hover {
  background-image: -moz-linear-gradient(top, #0082bd, #00628e);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0082bd), to(#00628e));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#0082bd, endColorStr=#00628e);
}
.mainmenu li:hover {
  background-image: -moz-linear-gradient(top, #0082bd, #00628e);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0082bd), to(#00628e));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#0082bd, endColorStr=#00628e);
}
.mainmenu li ul {
  background-color: #1e3c61;
  background-image: -moz-linear-gradient(top, #1a256f, #1e3c61);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1a256f), to(#1e3c61));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#1a256f, endColorStr=#1e3c61);
}
.mainmenu li ul li {
  background-color: transparent !important;
  background-image: none;
}
.mainmenu li ul li a {
  color: #ffffff;
  background-color: transparent !important;
}
.mainmenu li ul li:hover a {
  background-image: -moz-linear-gradient(top, #0082bd, #00628e);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0082bd), to(#00628e));
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=#0082bd, endColorStr=#00628e);
}
.mainmenu ul {
  padding: 0;
  margin: 0 0 13px 0;
  list-style: none;
}
.mainmenu li {
  margin: 0;
  line-height: 61px;
  text-align: left;
}
.mainmenu li a {
  padding: 0 0 0 20px;
  height: 61px;
  font-family: Arial;
  font-size: 13pt;
  font-weight: bold;
  text-decoration: none;
  display: block;
  width: 242px;
  position: relative;
  z-index: 1001;
}
.mainmenu li:hover {} .mainmenu li ul {
  margin: -61px 0 0 0;
  padding: 0 0 0 0;
  z-index: 1000;
  position: absolute;
  oveflow: hidden;
}
.mainmenu li ul li {
  width: 263px;
}
.mainmenu li ul li a {
  padding-left: 12px;
  display: block;
}
.mainmenu li ul li:hover {} 
.mainmenu ul li ul {
  margin-left: 0;
  max-height: 61px;
  overflow: hidden;
  transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in;
}
.mainmenu ul li:hover ul {
  margin-left: 262px;
  max-height: 999px;
  transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s;
}

<div id="menu">
  <div class="mainmenu">
    <ul>
      <li class='menu_child'><a href='/home.html' class='active'>Home</a>
      </li>
      <li class='menu_child'><a href='/blog.html' class=''>Blog</a>
      </li>
      <li class='menu_parent'><a href='/contact-us.html' class=''>Contact Us</a>
        <ul>
          <li><a href='/contact-us/find-us.html'>Find Us</a>
          </li>
          <li><a href='/contact-us/about-us.html'>About Us</a>
          </li>
          <li><a href='/contact-us/meet-the-team.html'>Meet the Team</a>
          </li>
        </ul>
      </li>
      <li class='menu_parent'><a href='/adventure.html' class=''>Adventure</a>
        <ul>
          <li><a href='/adventure/adventurer-grandmaster.html'>Adventurer Grandmaster</a>
          </li>
        </ul>
      </li>
      <li class='menu_child'><a href='/guilds.html' class=''>Guilds</a>
      </li>
      <li class='menu_parent'><a href='/trade.html' class=''>Trade</a>
        <ul>
          <li><a href='/trade/moonsea.html'>Moonsea</a>
          </li>
          <li><a href='/trade/hillsfar.html'>Hillsfar</a>
          </li>
          <li><a href='/trade/femphrey.html'>Femphrey</a>
          </li>
          <li><a href='/trade/anvil.html'>Anvil</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>