Question

我有一个简单的导航栏。正如您所期望的那样，与当前页面对应的链接上有一个名为“current”的简单CSS类。所有链接都具有良好的悬停过渡效果，“缓入”属性持续0.3秒。问题是，当用户点击导航栏上的其他链接时，他将看不到缓出效果，因为页面会立即切换。我知道我可以使用setTimeout（）函数通过jQuery延迟页面切换，但是我不太明白如何定位link元素上的“current”类并告诉浏览器慢慢淡出“当前”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类悬停类，该类在基本链接样式后定义为：

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“当前”类和链接悬停状态，我可以改变它，如果这是代码工作所需的。

提前感谢任何帮助过的人。任何意见/建议/提示都表示赞赏。

Answer 1

你本身不能淡出课程。您可以创建通过添加或删除类触发的CSS3过渡，并创建所需的动画，淡入淡出或其他任何内容。

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

或者，您可以让一个类fadeOut具有opacity: 0 CSS规则，并且在您添加opacity类的对象上设置fadeOut的CSS转换对象。

听起来你已经知道，如果链接点击会改变页面，那么你必须延迟用setTimeout()处理链接href，以便能够看到淡入淡出过渡并可能阻止链接的默认处理。

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

1 个答案: