search

jwstegemann / fritz2

Easily build reactive web-apps in Kotlin based on flows and coroutines.
https://www.fritz2.dev
MIT License
649 stars 27 forks source link

Timing problem with leave-animations #714

Open jwstegemann opened 1 year ago

jwstegemann commented 1 year ago

Leave animations can cause problems when the next patch(es) for a mount-point are applied before the animation is completed. This is because the patches work on indices of child-elements. When the dom-elements of animated tags are still there when the next patch is applied the indices calculated by the diff are not correct. The effect is, that some dom-nodes corresponding to removed elements are never deleted.

Possible solution:

Tag elements with a running leave-animation (for example by data-leaving) and do not count them in anymore, when patches are applied.

jwstegemann commented 1 year ago

Just a thought: Wouldn't it be better to wait for running animations to finish on the mount-point before we request a new value from the flow. This way we might to save a not necessary run of the Myer-diff. Or would this block other things? What do you think, @jamowei and @chausknecht ?

Lysander commented 1 year ago

It is quite reasonable, that this issue is allready fixed by PR #795 - we should investigate and then close this one.

Lysander commented 8 months ago

This is still a problem - this can be easily verfied with animations in toasts. Just enable the following uncommented animation code:

// headless-demo: toast.kt, L 108
        /*transition(
            enter = "transition-all duration-200 ease-in-out",
            enterStart = "opacity-0",
            enterEnd = "opacity-100",
            leave = "transition-all duration-200 ease-in-out",
            leaveStart = "opacity-100",
            leaveEnd = "opacity-0"
        )*/