webkitAnimationEnd called when animation not finish.
Reported by
hiyang...@gmail.com,
Nov 28
|
||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36 Steps to reproduce the problem: 1. Added EventListener webkitAnimationEnd to the dom. 2. Set an animation to the children. 3. Then webkitAnimationEnd function called when animation not finish. You can go to https://jsbin.com/juraniv/edit?html,css,js,output see the exmple in What is the expected behavior? What went wrong? The webkitAnimationEnd should called when animation finished. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 70.0.3538.77 Channel: stable OS Version: OS X 10.14.1 Flash Version: 31.0.0.153
,
Nov 28
But this behavior is abnormality, so would you like to fix it?
,
Nov 28
The abnormal case is not actually abnormal.
It is just event bubbling working as intended.
You have two dom nodes that are animating .
<parent>
<child>
The child animation is shorter (0.2s) of the two which means that 'webkitAnimationEnd' for the child animation is dispatched earlier.
Since this event bubbles it is received by the parents which in its handling removed the css class which cancels both animations.
You can check this by commenting out these two lines:
// dom.className = '';
// dom.removeEventListener('webkitAnimationEnd', consoleTiming);
Then you will see the handler is called 3 times.
There are multiple ways to fix this but a simple method may by to check the target of the event (e.target).
|
||
►
Sign in to add a comment |
||
Comment 1 by woxxom@gmail.com
, Nov 28