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

Question

我试图为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');});

Answer 1

在浏览器已隐藏页面后，将触发unload事件。来自MDN（强调我的）：

  

该文件处于特定状态：

     

  
• 所有资源仍然存在（img，iframe等）
  
• 最终用户无法再看到任何内容
  

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

一种方法是使用beforeunload事件（MDN）