如何定位当前页面的 nav 元素并使用 jQuery 淡出其 css "current"类？

Question

我有一个简单的导航栏。与当前页面对应的链接上有一个简单的CSS类"current"，正如您所期望的那样。所有链接都有一个很好的悬停过渡效果，"ease-in-out"属性持续0.3秒。问题是，当用户单击导航栏上的其他链接时，他不会看到缓出效果，因为页面会立即切换。我知道我可以通过jQuery的setTimeout()函数延迟页面切换，但我不太明白如何在链接元素上针对"当前"类，并告诉浏览器在切换到下一页之前慢慢淡出"当前"CSS类。

这有什么意义吗?目前HTML:

<nav>
<ul>
<li><a href="#" class="current">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

超级简单的导航，当前页面有一个CSS类hover class，定义在基本链接样式之后:

nav ul li a, nav ul li a:link, nav ul li a:visited{
    font-family: Arial, Verdana, sans-serif;
    text-decoration: none;
    color: rgba(0,0,0,1);
    font-size: 2.4em;
    padding: 5px 10px;
    margin: 0px 15px;
   -webkit-text-shadow: 1px 1px 1px rgba(255,255,255,1);
   -moz-text-shadow: 1px 1px 1px rgba(255,255,255,1);
   text-shadow: 1px 1px 1px rgba(255,255,255,1);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
nav ul li a:hover, nav ul li a:active, nav ul li a.current{
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,1);
    text-decoration: none;
    -moz-border-radius: 140px;
    -webkit-border-radius: 140px;
    border-radius: 140px;
    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    -moz-text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

无论如何我在网站的其他地方使用jQuery，所以jQuery的答案是完全可以接受的。我希望我已经说清楚了我的问题。基本上，我不希望用户在单击不同的导航链接时突然切换页面。我希望"当前"CSS类在浏览器转到新页面之前淡出0.3秒。我知道我有相同的样式应用到CSS "current"类和链接悬停状态，我可以改变它，如果这是需要的代码工作。

提前感谢任何帮助的人。如有任何意见/建议/提示，我们都非常感谢。

Answer 1

你不能淡出一个类本身。你可以创建一个CSS3过渡，通过添加或删除一个类来触发，并将创建所需的动画，淡出或其他。

因此，例如，您可以为opacity属性设置CSS3转换集。CSS中的.current类可以指定opacity: 1，默认的CSS条件(当没有.current类时)可以指定opacity: 0;。然后，当您从对象中删除current类时，该项目将逐渐褪为0不透明度。

或者，你可以有一个类fadeOut，它有一个opacity: 0 CSS规则，并且在对象上设置了opacity的CSS过渡，你只需将fadeOut类添加到对象上。

就像你已经知道的那样，如果点击链接要改变页面，那么你必须用setTimeout()延迟链接href的处理，以便能够看到渐变过渡，并可能阻止链接的默认处理。