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悬停时，margin-left的{{1}}的更改会立即转换，需要0.3秒才能完成。
由于下拉列表仅在移动完成后才会展开，因此应在ul属性的转换中添加0.3秒的延迟。
因此，在0到0.3秒之间，max-height向右移动，然后在0.3到1.3秒之间内容开始下降。
要在鼠标悬停时发生相反的情况，ul应该在默认选择器（未覆盖状态）上立即转换。这应该发生在1秒钟之前。
只有在下拉菜单撤消后，max-height才会被撤消，因此应在margin-left属性的转换中添加1秒的延迟。
因此，在0到1秒之间悬停时，margin-left会折叠，然后在1到1.3秒之间移回原来的位置。

＆＃13;

ul

＆＃13;

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

＆＃13;

扭转CSS3过渡延迟

1 个答案: