我使用 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');
});
最佳答案
你可以这样做:
$$('#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);
});
关于events - MooTools – 单击 anchor 将类添加到页面,并延迟加载 anchor 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20471993/