Why does it not animate after adding transition!!

Question

I have a code in which an object moves when you bring the mouse over it (upto this its perfectly working fine ) But when i add "transition:1s ease all" to it i have to tap on it(i am on my mobile) many times so that it can move again....Can anyone tell why and also the solution for this
Here is my code:-without transition:-
https://code.sololearn.com/WUISU58MHer8/?ref=app

Answer 1

change "mouseover" to "click", that solves the problem.

The reason why, it's because some attributes of JS specified to the mouse, don't work very well sometimes on mobile.

There's no mouse to hover over the element on mobile, JS gets confused sometimes with it when you are on your phone. Otherwise, "click" doesn't specify if it's mobile or with mouse(on pc)..

I'm telling by experience, i got some bug like that when using p5.js with a mouse attribute.

Answer 2

Thanks @Will when my computer is gone for servicing so when its back i will check it ....Thanks😁😁