Vanilla JS：延迟单击事件以添加动画 [英] Vanilla JS: delay click event to add animation

问题描述

请不要使用jQuery！

我不希望为此使用jQuery，因为它是一个很大的库，我只需要这样做这件事：

I would love not to use jQuery for this, because it's a big library and I only need to do this single thing:

我想为click事件添加短暂的延迟，以便可以使用CSS淡出页面元素。

I would like to add a short delay to a click event so I can fade elements off my page using CSS.

我可以张贴到目前为止我尝试过的所有代码，但是您会感到无聊。所以这是我认为最接近的一个：

I could post all of the code I've tried so far, but you'd get bored. So here's the one that I think is the closest:

document.getElementsByTagName('a').onclick = function (e) {

// Delay setting the location for one second
setTimeout(function() {this.href}, 90000);

var animOut = document.getElementByClassName('animateOut');
   animOut.className += 'out';
};

我已经排除使用 onbeforeunload ，因此劫持click事件似乎是最好的方法。

I've already ruled out using onbeforeunload, so hijacking the click event seems to be the best way.

再一次，我知道这在jQuery中是轻而易举的事，但如果它是

Once again, I know this would be a doddle in jQuery, but I would like to avoid it if it's possible.

非常感谢您的回答。

Ben

感谢评论者guest271314和Alpha，我已经决定采用这种方法，但仍然

Thanks to commenters guest271314 and The Alpha, I've settled on this approach, but still have yet to complete the puzzle.

window.onload = function(){

var links = document.getElementsByTagName('a');
for( var i=0,il = links.length; i< il; i ++ ){
 links[i].onclick = clickHandler;
}

function clickHandler(event) {

event.preventDefault();

// Delay setting the location for one second
setTimeout(function() {

  location.href = this.href;
}, 90000);

// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");

// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
   // add `out` `className` to `animOut` element at index `i`
   animOut[i].classList.add("out");
};
};
};

必须迭代 a 标签是

不幸的是， setTimeout 函数似乎不起作用。我需要完善此函数的内容，但不知道用什么方式。

Unfortunately, the setTimeout function doesn't seem to be working. I need to refine what's in this function, but don't know in what way.

欢迎进一步的帮助。

谢谢

本

推荐答案

我可以对此深表谢意，下面的2位用户（guest271314和The Alpha）在他们帮助我实现的目标上应得到很多认可。完整的代码经过一些改进，如下：

I can't really take credit for this, the 2 users below (guest271314 and The Alpha) deserve a lot of recognition for what they helped me to achieve. The full code, with a couple of refinements, is:

window.onload = function(){

var links = document.getElementsByTagName('a');

for( var i=0,il = links.length; i< il; i ++ ){
links[i].onclick = clickHandler;
}

function clickHandler(event) {

event.preventDefault();

var travelTo = this.getAttribute("href");

// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");

// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
   // add `out` `className` to `animOut` element at index `i`
   animOut[i].classList.add("out");
};

// Delay page out until the animation finishes
setTimeout(function() {
  window.location.href = travelTo;
}, 1000);
};
};

这篇关于Vanilla JS：延迟单击事件以添加动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！