web-animations/web-animations-js

Animation is not completed when page is being unloaded

Necroskillz opened this issue · 2 comments

Necroskillz commented

In my (angular 5) application, i have a left menu that is animated to slide in/out when it is opened/closed. This menu contains both SPA navigation links, and external links. When you click on any link, the menu is closed (slides out).

Now the problem is, that when external link is clicked, the animation doesn't complete (gets stuck) until the location of external link is loaded.

This problem only occurs when animations polyfill is used (e.g. iOS).

I made a demonstration of this problem: https://stackblitz.com/edit/angular-ugu2so?file=src%2Fapp%2Fapp.component.ts

I can implement some workaround for this issue, like wait for the animation to complete before redirecting, or disabling the animation. But I wanted to post this issue to make sure I'm not missing something.

birtles commented

(Why would the polyfill be used for Firefox? It has Web Animations support.)

Necroskillz commented

Sorry, you are right. I have a super old version of Firefox that doesn't support it yet.

But still the issue is there for iOS at least.