search

web-animations / web-animations-js

JavaScript implementation of the Web Animations API
http://web-animations.github.io
Apache License 2.0
3.77k stars 409 forks source link

Cancelling filling animation #145

Open govis opened 7 years ago

govis commented 7 years ago

It is my understanding that Animation.cancel is supposed to remove any remaining fill effects of KeyframeEffects that where part of the animation even after it has finished.

I am animating page transition and use the fill property to avoid flicker during animation and need to clear the fill effects after the animation finished. Unfortunately it doesn't seem to work reliably in my scenario:

Following examples animate outgoing page from opacity: 1 to opacity: 0 while the incoming page is animated with a transform.

http://jsbin.com/zeyajemuko/edit?html,output

http://jsbin.com/jobavopixo/edit?html,output

First example seems to work fine. Second is a bit more complex with 3 KeyframeEffects being used. After clicking "Next Page" 4 times you should see that both pages get stuck in opacity: 0 filling animation. So it appears that it does work in first 2 page transitions (1 -> 2 and 2->1) but stops after that for some reason.

As you can see I am detaching the outgoing page from dom after the animation - I wonder it this has anything to do with it. Please ignore the polymer bits and just look at _animateTransition methods. Thanks.

drawcall commented 7 years ago

You can try using anix, a simpler cartoon library https://github.com/a-jie/AniX