MooTools - 添加類到頁面上的點擊錨點，帶有延遲加載的錨點鏈接

Question

我使用MooTools在點擊導航菜單中的鏈接時添加了兩個類，這會觸發一個動畫CSS淡入淡出頁。

我想延遲加載新頁面的鏈接，直到添加了類，並且再進行2s動畫發生。

我的代碼如下。我試圖在這個鏈接上添加一個click事件，它添加了這些類。我已經使用evt.stop停止新的頁面加載，這允許添加類並隨後觸發動畫，但是這會阻止鏈接將您帶到新頁面。

我該如何調整這段代碼以確保鏈接正常工作，但如上所述延遲？

<nav id="main-nav"> 
    <ul> 
    <li><a href="/page1.php">Page 1</a></li> 
    <li><a href="/page2.php">Page 2</a></li> 
    </ul> 
</nav>  

$$('.page #main-nav li a').addEvent('click', function(evt) { 
    evt.stop(); 
    $(document.body).addClass('animated fadeOut'); 
}); 

Answer 1

你可以做一些事情是這樣的：

$$('#main-nav li a').addEvent('click', function(evt) { 
    evt.stop(); 
    // will break if clasList pr goes in if you do two in 1 string 
    $(document.body).addClass('animated').addClass('fadeOut'); 
    // already extended. 

    // should still use addEvent but declare animationend as a native one (type 2) 
    // also, depends on browser, there needs to be detection for the right event name (prefix). 
    document.body.addEventListener("animationend", function(){ 
    // at animation end, http://mootools.net/forge/p/cssevents for vendor shit 
    window.location = evt.target.href; // simulate clicking on the a element 
    }, false); 

    // or at arbitrary time 
    // setTimeout(function(){ 
    // window.location = evt.target.href; 
    // }, 2000); 
});