Remove class when page loads and add class when leaving the page

Question

I'm trying to animate a div so it appears when I open the page and disappears when I leave the page. I was able to make it appear but not disappear. here's what I have:

.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');});

So you want to pause the closing/exiting of a page while you wait for a small animation to play? — Khauri
– Khauri, Commented Jan 17, 2018 at 19:17
@KhauriMcClain maybe something like that, do you think that's the better solution? — Bruno Carvalho
– Bruno Carvalho, Commented Jan 17, 2018 at 19:32

rollstuhlfahrer · Accepted Answer · 2018-01-17 19:13:28Z

3

The unload event is fired, after the browser has already hidden the page. From MDN (emphasis mine):

The document is in a particular state:

All the resources still exist (img, iframe etc.)

Nothing is visible anymore to the end user

In order for the user to see the unloading animation, you need to trigger it earlier.

One way is to use the beforeunload event (MDN)

answered Jan 17, 2018 at 19:13

rollstuhlfahrer

4,0789 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruno Carvalho Over a year ago

I have no idea how that works ahah but i'll search it! Thanks!! Btw do you think this is a good way to create some animation between pages?

Collectives™ on Stack Overflow

Remove class when page loads and add class when leaving the page

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related