Clear pending timeout (if a new transition started before it finished) about hyperapp-transitions HOT 5 CLOSED

Thanks @atomiks! It's a good idea, but I don't think just clearing the timeout will be enough to get the behavior you want (Try here: https://codepen.io/zaceno/pen/ELybGW).

The idea is, if you click the same square multiple times, you want it to slowly move towards its intended position from where it is now, without janking, right?

I need to think a bit more about this - but to be honest, I don't think it's a high priority issue ... more "nice to have".

from hyperapp-transitions.

You're right - clearing the timeout fixes the jank due to the old timeout firing before the new transition finishes (so it will instantly move to the new position), but the elements should transition from their current mid-transition position... does getBoundingClientRect() work there?

It also introduces a problem of no transitions occuring sometimes if timed in a certain way.

A semi-solution would be to prevent a new position update if it's still transitioning

from hyperapp-transitions.

So I started using this module in a proper project and this is proving to be kind of a dealbreaker.

• Rapidly clicking a button that expands an item inside the transitioned list item causes glitchy transitions of the list items (normal user behavior I'd say)
• Adding a delay to stagger list items that transition in continually increments the delay each time the list items are filtered since the timeout is not cleared, causing them to not appear after a while

from hyperapp-transitions.

@atomiks While I'm still not sure if I'll be able to fix this, do you think you could provide an example like in a codepen or repo?

Especially an example of "Rapidly clicking a button that expands an item inside the transitioned list item" since I'm having trouble visualizing what's going on.

No promises, but it would be helpful to me (or hopefully someone smarter) in finding a solution.

from hyperapp-transitions.

@atomiks

I'm going to close for now -- I'm still open to looking into this but I need an example to work with. Reopen if you've got one!

from hyperapp-transitions.