过渡延迟不适用于边框

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>

您可以在此处的规范中找到可动画/可转换属性的完整列表.