1

I've got a simple nav bar. The link that corresponds to the current page has a simple CSS class called "current" on it, as you'd expect. All the links have a nice hover transition effect with the 'ease-in-out' property lasting 0.3 seconds. Problem is, when the user clicks a different link on the nav bar, he won't see the ease-out effect because the page will switch instantly. I know that I can delay the page switch via jQuery with a setTimeout() function, but I don't quite get how to target the "current" class on the link element and tell the browser to slowly fade out the "current" CSS class before switching to the next page.

Is this making any sense? Current 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>

Super simple navigation with the current page having a CSS class hover class, which is defined after the basic link styles as:

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);
}

I'm using jQuery anyway for something else in the site, so a jQuery answer is perfectly acceptable. I hope I'm being clear enough with my problem. Basically, I don't want an abrupt page switch for the user when he clicks on a different nav link. I want the "current" CSS class to fade out for 0.3 seconds before the browser goes to the new page. I know that I have the same styles applied to the CSS "current" class and the link hover state, I can change that if that's what it takes for the code to work.

Thanks in advance to anyone who helps out. Any advice/suggestions/tips are appreciated.

4

1 に答える 1

0

クラス自体をフェードアウトすることはできません。クラスの追加または削除によってトリガーされる CSS3 トランジションを作成し、目的のアニメーション、フェードなどを作成できます。

たとえば、opacityプロパティに CSS3 トランジションを設定できます。CSSの.currentクラスで指定できopacity: 1、デフォルトの CSS 条件 (.currentクラスがない場合) を for にすることができますopacity: 0;。次に、オブジェクトからクラスを削除するcurrentと、アイテムは徐々に不透明度 0 にフェードします。

または、 CSS ルールをfadeOut持ち、オブジェクトに設定するopacity: 0ための CSS トランジションを使用して、クラスをオブジェクトopacityに追加するだけのクラスを持つこともできfadeOutます。

ご存知のように、リンクのクリックによってページが変更setTimeout()される場合、フェード トランジションを確認し、おそらくデフォルトの処理を防ぐために、リンク href の処理を​​遅らせる必要があります。リンク。

于 2012-12-31T05:20:00.967 に答える