当用户单击链接时,我需要在我的页面上添加一些对象来制作动画。我希望每个对象都可以缩放和淡出,但不是所有对象,例如导航按钮。
我在想,当用户单击链接时,页面会延迟 1 秒,然后再打开重定向链接以允许淡出,让动画有时间生效。
当用户单击链接时,我需要在我的页面上添加一些对象来制作动画。我希望每个对象都可以缩放和淡出,但不是所有对象,例如导航按钮。
我在想,当用户单击链接时,页面会延迟 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';
}
where myDiv
id 你想要动画的元素,out
是代表过渡最后阶段的 CSS 类。
这是一个 JSfiddle:http: //jsfiddle.net/X5vKS/
如果您需要更好地控制等待时间,可以使用onbeforeunload
with 函数setTimeout
将页面退出延迟动画的时间长度。这对于 JS 初学者来说有点复杂,但非常可行。