转换延迟不适用于边框

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/

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

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

Answer 1

这是因为border-style属性不是可转换属性。当您从border:none转换到border: thin solid white时，border-style也将与border-color和border-width一起更改。border-style的初始值为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>

您可以在此处的等级库中找到可设置动画/可转换特性的完整列表。