过渡延迟不适用于边界

Question

.hovereffect:hover > .hidden {
  opacity: 1;
  height: 1.5em;
  padding: 0.5em 1em 0.5em 2em;
  border: thin solid white;
  transition-delay: 0s;
}
.hovereffect .hidden {
  opacity: 0;
  clear: both;
  height: 0em;
  padding: 0em;
  border: none;
  transition-property: opacity height padding border;
  transition-duration: 400ms;
  transition-delay: 1s;
}
nav {
  float: right;
  width: 15em;
  margin: 0.1em 0em 0.1em 1em;
  font-variant: small-caps;
}
nav a {
  display: block;
  background-color: #FBF0D4;
  color: #725D29;
  border: thin solid white;
  padding: 0.5em 1em;
  text-decoration: underline;
}
nav a:hover,
nav a:active {
  background-color: #725D29;
  color: #FBF0D4;
}

<nav>
  <a href="/guitar">Menu 1</a>
  <div class="hovereffect">
    <a href="/software">Menu 2</a>
    <a class="hidden" href="/software/practicaluml">Submenu 1</a>
    <a class="hidden" href="/software/trusting_trust">Submenu 2</a>
  </div>
  <a href="/sketches">Menu 3</a>
  <a href="/sketches">Menu 4</a>
</nav>

JSFiddle：http://jsfiddle.net/ke9cc0c7/

我正在尝试显示子菜单列表：将鼠标悬停在菜单项上，否则该菜单项将被隐藏。但是当用户将鼠标移离子菜单时，折叠列表导致菜单项改变位置，迫使毫无戒心的用户追逐首选 link。所以我决定添加一个过渡延迟。但由于某种原因，它在边界上不起作用！（有关演示，请参阅 JSFiddle link。）当用户将鼠标移离子菜单时，边框会立即重置为 0。

我犯了什么特别的错误吗？我只是一个学习者

Answer 1

那是因为 border-style 属性不是 transitionable property. When you transition from border:none to border: thin solid white, the border-style is also being changed along with the border-color and the border-width. The initial value of border-style is none.

将border: 0px solid white设置为初始值将使其正常工作，因为border-style即使由于宽度为0px而删除了边框本身也保持不变并且不会产生任何视觉差异。

.hovereffect:hover > .hidden {
  opacity: 1;
  height: 1.5em;
  padding: 0.5em 1em 0.5em 2em;
  border: thin solid white;
  transition-delay: 0s;
}
.hovereffect .hidden {
  opacity: 0;
  clear: both;
  height: 0em;
  padding: 0em;
  border: 0px solid white;
  transition-property: opacity height padding border;
  transition-duration: 400ms;
  transition-delay: 1s;
}
nav {
  float: right;
  width: 15em;
  margin: 0.1em 0em 0.1em 1em;
  font-variant: small-caps;
}
nav a {
  display: block;
  background-color: #FBF0D4;
  color: #725D29;
  border: thin solid white;
  padding: 0.5em 1em;
  text-decoration: underline;
}
nav a:hover,
nav a:active {
  background-color: #725D29;
  color: #FBF0D4;
}

<nav>
  <a href="/guitar">Menu 1</a>
  <div class="hovereffect">
    <a href="/software">Menu 2</a>
    <a class="hidden" href="/software/practicaluml">Submenu 1</a>
    <a class="hidden" href="/software/trusting_trust">Submenu 2</a>
  </div>
  <a href="/sketches">Menu 3</a>
  <a href="/sketches">Menu 4</a>
</nav>

您可以在 spec here.

中找到 animatable/transitionable 属性的完整列表

过渡延迟不适用于边界

Transition delay doesn't work with border

html

css

css-transitions