How to use Motion exit when exiting, when there are many by doing exit child first? | SolidJS | Page 1

hardy tulip Mar 5, 2023, 6:39 AM

#

<Presence exitBeforeEnter>
                <Show when={isShow()}>
                    <Motion.div class="grid grid-cols-2 fixed top-0 right-0 bg-red-500" initial={{ width: "0%" }} animate={{ width: "100%" }} exit={{ width: "0%" }}>
                        <Motion.div class="bg-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 2 }} exit={{ opacity: 0 }} /> 
                        <div class="bg-pink-500">
                            <AiOutlineClose onclick={toggle} />
                        </div>
                    </Motion.div>
                </Show>
</Presence>

twilit pagoda Mar 5, 2023, 6:57 AM

#

I think that the presence component waits only for it's direct child to exit before removing them from dom.
So you'd need to make sure that the root motion element has an animation duration the same or longer then the child.

hardy tulip Mar 5, 2023, 6:59 AM

#

I assumed they were in order on exit as well because on initial they were in order.

twilit pagoda Mar 5, 2023, 7:00 AM

#

they start entering and exiting immediately from what I remember

hardy tulip Mar 5, 2023, 7:01 AM

#

I tried adding delay but it didn't work.

twilit pagoda Mar 5, 2023, 7:01 AM

#

In the current version the direct child will have the exit transition triggered first. But I guess that shouldn't matter much.

twilit pagoda Mar 5, 2023, 7:02 AM

#

hardy tulip I tried adding delay but it didn't work.

what happens?

hardy tulip Mar 5, 2023, 7:03 AM

#

It just slows down before exiting the same way without ordering the animation.

twilit pagoda Mar 5, 2023, 7:04 AM

#

I could make the next version wait for all children exit before removing from dom. I didn't know how important it was, and the vue implementation I was basing this on didn't have this either.

#

What do you mean by "ordering" exactly?

#

You want the child to finish exiting before parent starts?

hardy tulip Mar 5, 2023, 7:06 AM

#

sorry for my translate i mean ```
initial > Motion 1 > Motion 2

Motion 2 > Motion 1 > exit
but it is Motion 1 > exit

#

when exit Motion 2 not trigger

twilit pagoda Mar 5, 2023, 7:07 AM

#

ah
ok so I was overthinking the problem

#

I've made a PR to the library yesterday that should fix that - all children will start animating exit onCleanup
https://github.com/motiondivision/motionone/pull/176

GitHub

solid: Reimplement Presence using solid-primitives by thetarnav · P...

This reimplements the Presence component using the @solid-primitives/transition-group and @solid-primitives/refs packages. So that the low-level and likely-to-change implementation details — such a...

hardy tulip Mar 5, 2023, 7:11 AM

#

i must use library "@solid-primitives/transition-group" for this problem?

twilit pagoda Mar 5, 2023, 7:15 AM

#

Not directly, I'm making it a dependency of the motionone implementation.
It doesn't help with your problem directly, but I think I've fixed it while working on it.

#

Or at least made it more consistent - I would assume that the exit transition would be triggered in the current version as well.

#

If you want, you could build the package locally from the version on the pr and check if it does solve your issue.

#How to use Motion exit when exiting, when there are many by doing exit child first?