Javascript 加载页面时删除类，离开页面时添加类

我正在尝试设置一个div的动画，以便它在我打开页面时出现，在我离开页面时消失。 我能让它出现，但不能消失。以下是我所拥有的：

.crvlh{
float: left;
width: 94vw;
overflow: hidden;
margin-top: 10vw;
opacity:1;
transition: opacity 1s ease-in-out, margin-top 0.5s ease-in-out;}

.crvlh.load{
opacity: 0;
margin-top: 13vw;   
transition: opacity 1s ease-in-out, margin-top 0.5s ease-in-out;}


$(window).load(function () {$('.crvlh').removeClass('load');});
$(window).unload(function () {$('.crvlh').addClass('load');});

---

浏览器已隐藏页面后，将触发

unload

事件。来自（我的）：

文档处于特定状态：

• 所有资源仍然存在（img、iframe等）
• 最终用户再也看不到任何东西了

为了让用户看到卸载动画，您需要提前触发它

---

一种方法是使用

beforeunload

事件（）

卸载对于大多数事情来说都太晚了……所以你想在等待播放小动画时暂停关闭/退出页面？@KhauriMcClain可能是这样的，你认为这是更好的解决方案吗？我不知道如何工作啊，但我会搜索它！谢谢顺便问一下，你认为这是一个很好的方式来创建一些网页之间的动画？