页面退出时的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/

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