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的情况下编写此代码？ / p>

这是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 }

这将确保如果更改主体的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;
    });
});

NB：在事件处理程序中，this将为document。点击的元素是event.target。

Answer 2

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

e.preventDefault()

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

香草JS动画？

2 个答案: