ease (Transitions) eat mouse event

[iacore]

Description

when ease property is used on a tag, the mouse event gets eaten when happened at the end of transition out.

Reproduction

See the long rectangle in image (shown by arrow)?

• click it once to turn it on (blue)
• click once to turn it off, then click again at the moment it is turned off. The time between is < 1s.

What happens: the button is not turned on again.

Try different delays. The delay required between two clicks is pretty consistent. If you do it too fast or slow, the button works as intended.

https://imba.io/guides/transitions

[prathammpurohit]

Hey @iacore, I would like to work on this issue.

May we discuss it in detail further?

[iacore]

Can you reproduce the problem?

[prathammpurohit]

I opened the link; and looked at the issue mentioned above, the animation worked pretty fine imo. Maybe I am tapping it too fast or too slow for the time mentioned. I thought there might be something I missed. Can you cross-check it once? But I think it worked fine.

[iacore]

I don't know how to show mouse input in video.

Every "ButtonPress" is me pressing the primary mouse button. Ignore "RawButtonPress" (it's duplicate).

Peek.2023-09-28.07-03.mp4

this is in Firefox

[prathammpurohit]

I got it. It's a problem with the CSS property of the alert modal .alert.alert. We have to add pointer-events: none;

As the opacity fades to 0, the modal remains in the DOM and when we register the click on the box, the click isn't actually registered.

Look at the DOM updation to understand the click event. (Please check it on your half too; PS: I am using Chrome)

If this is the suitable solution, I would like to work for this one, I'm a university student who is in an immense need of getting started with that good first issue.

Screen.Recording.-.Sep.28.2023.mp4