Vanilla JS:延迟点击事件添加动画

时间:2016-03-21 07:37:47

标签: javascript animation

请不要jQuery!

我不想为此使用jQuery,因为它是一个很大的库,我只需要做这件事:

我想为点击事件添加一个短暂的延迟,这样我就可以使用CSS淡化我的页面中的元素。

我可以发布到目前为止我尝试过的所有代码,但是你会觉得无聊。所以这是我认为最接近的那个:

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,因此劫持点击事件似乎是最好的方式。

再一次,我知道这对jQuery来说是一个轻而易举的事,但如果可能的话,我想避免它。

非常感谢您的回答。

更新

感谢评论者guest271314和The Alpha,我已经确定了这种方法,但还没有完成这个难题。

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功能似乎不起作用。我需要改进这个函数中的内容,但不知道以什么方式。

非常欢迎进一步的援助。

由于

3 个答案:

答案 0 :(得分:2)

您可以尝试这样的事情:

document.getElementsByTagName('a').onclick = function (event) {
    event.preventDefault();
    document.getElementByClassName('animateOut').className += ' out';
    setTimeout(function() {
        location.href = this.href;
    }, 1000);
};

答案 1 :(得分:1)

document.getElementsByClassName应该有一个"s"。要将className添加到所有animateOut元素,可以使用for循环;如果预期结果导航到点击的this.href元素的window.location.href = e.target.href,请将href更改为a;要离开this.href,则要求刷新window.location.href中的当前this.hrefsetTimeout

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

// Delay setting the location for one second
setTimeout(function() {window.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");
};

答案 2 :(得分:1)

我真的不能相信这一点,下面的2位用户(guest271314和The Alpha)值得他们帮助我实现的目标得到很多认可。完整的代码有几个改进:

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);
};
};