CSS3-过渡-答案

【问题标题】：CSS3 -transition-CSS3-过渡-
【发布时间】：2012-03-26 17:37:36
【问题描述】：

我有一个导航栏，我正在使用 css 在悬停时突出显示以及当 li 类处于活动状态时。我想要一个淡入背景的过渡。这就是我目前所拥有的：

CSS：

#nav {height:32px; border-top: 1px solid #fff; border-right: 1px solid #FFFFFF; background: #141941 url('../img/topTierBG.gif') repeat-x; }
#nav ul {padding: 0px; list-style: none; height:32px; width:100%;  }
#nav li { position:relative; float: left; margin:0; border-left:1px solid #fff; line-height:30px; background: #141941 url('../img/topTierBG.gif') repeat-x; padding-top:0px;}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {width:156px; display:block; text-align:center; font-size:12px; text-decoration:none; color:#fff; margin: 0px 0px 0px 0px; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; }
#nav .active {text-align:center; text-decoration:none; padding:0; color:#fff; height:32px; background: #1D2248 url('../img/activeTab.gif') repeat-x; }
#nav a:hover, #nav a:active{background: #1D2248 url('../img/activeTab.gif') repeat-x; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; }

html:

<div id="nav"><ul id="xmp-nav">
<li class="active"><a href="/" style="width:196px;">HOME</a></li>
<li><a href="login.php" style="width:195px;">STAFF LOGIN</a></li>
<li><a href="resources.php" style="width:195px;">RESOURCES</a></li>
<li><a href="information.php" style="width:195px;">PARENT INFORMATION</a></li>
<li><a href="links.php" class="last" style="width:195px;">LINKS</a></li>
</ul></div>

问题是，当我将鼠标悬停在非活动选项卡上时，不会发生转换，但是当我将鼠标悬停在已经活动的选项卡上时，会从非活动样式过渡到活动样式。

我期待听到您的想法，如果按照我的布局方式不可能的话。

Here is a link!

【问题讨论】：

转换不是转换。请不要混淆它们。

标签： html css webkit css-transitions

【解决方案1】：

这里有一个简化的小提琴，可能对你有帮助。你只需要给你的元素添加transition和-webkit-transition，然后当你改变hover时的背景颜色时，它就会与你可以自定义的transition一起起作用。

希望对你有帮助。

代码如下：

li{
float: left;
padding: 10px 15px 10px 15px;
background: red;
cursor: pointer;
transition: background 1s;
-webkit-transition: background 1s;}

li:hover{
background: blue;}

这是fiddle

【讨论】：

【解决方案2】：

过渡以这种方式工作：

您有状态为 A 的元素（例如 li）。
您将元素状态更改为 B（例如，通过向 li 添加新类或向其添加 :hover）从而更改其属性（例如 background ：红色）。
在新的类/状态中添加过渡，并设置要设置动画的属性（例如 background）。

现在你可以看到流畅的动画了。

在您的示例中，您有两个转换：

"transition: background 0.5s linear;" on #nav a — 它不起作用，因为 #nav a 中没有背景变化悬停时。
transition: background 0.5s linear; on #nav a:hover, #nav a:active——表示改变“#nav a”的背景 > 从 "none"，到 "background: #1D2248 url('../img/activeTab.gif') repeat-x;" 线性动画在 0.5s .

我用你的代码制作了简化的 jsfiddle，展示了如何在悬停时更改动画：

http://jsfiddle.net/hzTwz/

【讨论】：