扭转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盘旋时，改变 margin-left的ul立即转移，并在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 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;
}

.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;
}