1

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

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“当前”类和链接悬停状态应用了相同的样式，如果这是代码工作所需要的，我可以更改它。

提前感谢任何提供帮助的人。任何建议/建议/提示表示赞赏。

4

1 回答 1

0

您不能淡出课程本身。您可以创建一个通过添加或删除一个类来触发的 CSS3 过渡，并将创建所需的动画、淡入淡出或其他任何东西。

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

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

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

于 2012-12-31T05:20:00.967 回答