javascript - Vanilla JS 动画？

Question

就像问题中一样，我有一个代码:

$(document).on('click', '.link-fade', function (event) {
event.preventDefault();
var link = this;
$('body').fadeOut(function () {
location.href = link.href;
});
});

它是使用 Jquery 库编写的，但我想在没有它的情况下编写它(我知道你必须使用 addEventlistener 等和 XHR，但我不知道如何使用 XHR)如何在没有 Jquery 的情况下编写这段代码？

这是 CSS 代码(动画):

body {
-webkit-animation: fadeIn 1s ease-in;
animation: fadeIn 1s ease-in;
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

Answer 1

您可以使用 transition 和 opacity CSS 属性。

首先在您的页面上定义以下 CSS:

body { transition: opacity 400ms }

这将确保如果您更改主体的不透明度，它将具有淡入淡出效果。

通过监听 transitionend 事件，您可以在转换结束后执行预期的导航操作。

最后，事件委托(delegate)可以通过在事件处理程序中添加类检查来完成:如果事件没有发生在类“link-fade”的元素上，那么就退出处理程序:

document.addEventListener('click', function (event) {
    if (!event.target.classList.contains("link-fade")) return; 
    event.preventDefault();
    var link = event.target;
    document.body.style.opacity = 0;
    document.body.addEventListener("transitionend", function () {
        location.href = link.href;
    });
});

注意:this，在事件处理程序中，将是 document。单击的元素是 event.target。