CSS - 边界上的过渡无法正常工作答案

【问题标题】：CSS - Transition on border not working fineCSS - 边界上的过渡无法正常工作
【发布时间】：2014-05-01 09:37:58
【问题描述】：

CSS 代码：

.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left, border-right;
   -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
}

.css3_nudge ul li a:hover {
   background-color: #efefef;
   color: #333;
   padding-left: 50px;
   border-right: 1px solid red;
}

HTML 代码：

<div class="css3_nudge nudge">
   <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog">Blog</a></li>
      <li><a href="#" title="About">About</a></li>
      <li><a href="#" title="Register">Register</a></li>
      <li><a href="#" title="Contact">Contact</a></li>
   </ul>
</div>

过渡对除边框以外的所有元素都正常工作，它只出现在 400 毫秒结束时，对边框没有影响。

我想要实现的效果类似于新的 google gmail 按钮。

提前感谢您的帮助

【问题讨论】：

我在 Gmail 的按钮上看不到动画。由于他们以进行 A-B 测试而闻名，因此向我们提供您正在谈论的内容的动画或视频可能是个好主意。
当您的光标悬停在按钮上时，您会看到它......带有新主题
正如我所说，在我的版本中，即使在悬停时也没有动画。谷歌以做 A-B 测试而闻名，这意味着不同的人看到一个网站的不同版本，而用户甚至不知道另一个存在。该公司将其用于比较目的。

标签： css css-transitions

【解决方案1】：

这是一个非常简单的修复。您只需要在悬停效果之前已经存在边框。所以只需像下面这样设置border-right: 1px solid #fff;：

.css3_nudge ul li a {
   -webkit-transition-property: color, background-color, padding-left, border-right;
   -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
   border-right: 1px solid #fff; /* added property */
}

那么过渡实际上只是改变边框的颜色而不是创建边框。

【讨论】：

只是想为现在遇到此问题的任何人添加，您最好将边框颜色设置为transparent，这样您就不必担心颜色管理，尤其是在共享样式时.
@NathanHornby：+1 边框透明。谢谢。