Question

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

我想延迟加载新页面的链接，直到添加了类，并且动画还需要2秒。

我的代码如下。我的尝试是在链接中添加一个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);
});

MooTools - 在点击锚点时添加类到页面，延迟加载锚点链接

1 个答案: