香草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 }

这将确保如果您更改 body 的 opacity，它将具有淡入淡出效果。

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

最后，可以通过在事件处理程序中添加类检查来完成事件委托：如果事件没有发生在“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。

Answer 2

点击后为fadeOut body创建动画并将其应用于类.fade-out-body的body，然后你可以阻止点击重定向（e.preventDefault()）将该类添加到fadeOut body，等待动画完成，然后你可以更改页面的位置（就像您现在在 jQuery 中所做的那样）。加载时，您可以添加上面编写的动画，它们应该一起工作（点击后淡出，加载时淡入）。

function fadeOutRedirect(e) {
    e.preventDefault();
    /* Add class - it should fade out body */
    document.body.classList.add('fade-out-body');

    /* After 1000ms redirect to the new subpage */
    const newLocation = e.target.src 
    setTimeout(function(){ 
        location.href = newLocation;    
    }, 1000);

}

var fadeOutLinks = document.querySelectorAll('.link-fade');
Array.prototype.forEach.call(fadeOutLinks, function (el, i) {
    el.addEventListener('click', fadeOutRedirect);
});

这不是最佳解决方案 - 因为我们并没有真正加载内容只是延迟它，但要避免它，您需要使用 XHR。但它是一个类似于 jQuery 中使用的解决方案。