边框顶部过渡无法正常工作答案

【问题标题】：Border-top transition doesn't work properly边框顶部过渡无法正常工作
【发布时间】：2013-10-03 12:19:00
【问题描述】：

我在 CSS 中使用了 transition 属性，但它不能与边框一起正常工作。它转入，但不转出。这是我的代码，有什么帮助吗？

#menu {
  width: 100%;
  height: 70px;
}
#menuitem {
  width: 150px;
  height: 70px;
  float: right;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
#menuitem:hover {
  border-top: 12px solid #000;
}
.menutext {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  color: #000;
  text-decoration: none;
}

<body>
  <div id="menu">
    <div class="menutext" id="menuitem">CONTACT</div>
    <div class="menutext" id="menuitem">ABOUT</div>
    <div class="menutext" id="menuitem">PRICES</div>
  </div>
</body>

小提琴：http://jsfiddle.net/MhkTT/

【问题讨论】：

标签： html css border css-transitions

【解决方案1】：

不会发生反向转换，因为仅在hover 上指定了边框。您必须将其添加到 #menuitem 中，也如 sn-p 中所示，以使其转换回原始状态。

#menu {
  width: 100%;
  height: 70px;
}
#menuitem {
  width: 150px;
  height: 70px;
  float: right;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
  border-top: 0px solid transparent;  /* added this */
  transition: all ease-in-out 0.2s;
}
#menuitem:hover {
  border-top: 12px solid #000;
}
.menutext {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  color: #000;
  text-decoration: none;
}

<div id="menu">
  <div class="menutext" id="menuitem">CONTACT</div>
  <div class="menutext" id="menuitem">ABOUT</div>
  <div class="menutext" id="menuitem">PRICES</div>
</div>

Fiddle Demo

（最初我设置了 border 属性，但将其更改为与您问题中的代码匹配。）

【讨论】：

23 秒太慢了 :(
@DineshKanivu：是的，因为我们正在从 0px 过渡到 12px 上边框。

【解决方案2】：

您没有在非悬停样式中设置任何 border-top 属性。浏览器不知道要转换回什么，所以它只是跳转。

只需将此添加到#menuitem：

border-top: 0px solid #000

（或任何你想要转换的颜色，白色表示完全没有颜色转换）

【讨论】：

【解决方案3】：

喜欢这个

demo

css

#menuitem:hover {
    border-top: none;
}

【讨论】：

@Fags：糟糕，最初并没有注意到。您已在 hover 上设置无边框。 OP想要边界，但它有进出过渡。不过，我将按原样保留 +1（部分原因是它现在已锁定：D）

【解决方案4】：

而不是

border-top: 12px solid #FFF;

给出这个 CSS 代码

box-shadow:inset 0px 12px 0px 0px #000

http://jsfiddle.net/MhkTT/2/

【讨论】：

@user2765804 我认为它会帮助你
如果我们给定边框，它会将元素向下推，所以 Box-shadow:inset id 是好的选项