扭转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演示

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>