events - MooTools – 单击 anchor 将类添加到页面，并延迟加载 anchor 链接

Question

我使用 MooTools 在单击导航菜单中的链接时向正文添加两个类，这会触发页面的动画 CSS 淡入淡出。

我想延迟链接加载新页面，直到添加类并再延迟 2 秒让动画发生。

我的代码如下。我的尝试是向链接添加一个单击事件，这会添加类。我使用 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);
});