javascript - 页面退出时的 CSS 过渡属性

Question

当用户单击链接时，我的页面上需要一些对象来动画。我希望每个对象都缩放和淡出，但不是所有对象(例如导航按钮)。

我在想，当用户点击一个链接时，页面会在打开重定向链接之前延迟 1 秒，以允许淡出，从而让动画有时间生效。

Answer 1

查看JS事件window.onbeforeunload

https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload

希望在触发此功能时仅运行退出动画就足够了——浏览器通常需要大约一秒钟的时间才能完全卸载页面，但这取决于您的浏览器、页面大小和 CPU 速度。

假设您使用的是纯 JS，并且您知道如何进行 CSS 转换，那么在页面退出时制作动画的简单方法如下所示:

window.onbeforeunload = function(e){
    document.getElementById('myDiv').className = 'out';
}

其中 myDiv id 是您要设置动画的元素，out 是表示过渡最后阶段的 CSS 类。

这是一个 JSfiddle:http://jsfiddle.net/X5vKS/

如果您需要更好地控制等待时间，您可以使用带有setTimeout 的onbeforeunload 函数来将页面退出延迟动画的时间长度。这对于 JS 初学者来说有点复杂，但非常可行。