How to unbind the mount function with a global svelte/transition inside from the component that called it?

[Serator]

Hi there 👋. I have encountered a problem and am looking for an elegant way to solve it.

I have 2 tabs, one of which has a popup mounted in document.body (Yeah, I know there is a dialog element or popover attribute, but unfortunately I can't use it for various reasons). The popup should appear and disappear smoothly. To do this, I use svelte/transition with the |global modifier.

The problem is that when I switch tabs, the tab that has Popup in it (Tab1) is not removed from the DOM until the Popup disappearance animation is over.

I would like to make the Tab2 component unmount and remove from the DOM instantly, and the Popup component smoothly.

Demo: https://svelte.dev/playground/e820aac2b926414fb75544feb038bfa6?version=5.27.0

I'm really hoping for your help. Thanks!

[webJose]

If that's the case, why do you specify an out transition? Why not just use an in transition?

[Serator]

Hi @webJose. Thanks for your reply. I need transitions in both directions. The playground example is intentionally simplified, in reality it's much more complicated.

Imagine you have a modal window that has tabs that contain buttons with tooltips.

Both the modal window and the tooltips are built using a mount based portal.

At some point, the user clicks a button that unmounts the parent of the modal window.

As a result, both the modal window and the tooltip should smoothly disappear, but the parent of the modal window should disappear instantly.

This is one of the scenarios, in fact, using the portal we have built pop-up panels, drop-down lists, modal windows, tooltips, etc.

[brunnerh]

I am a bit surprised that the lifetimes are automatically coupled.

This usually relies on code being synchronous, which appears to be the case here as well, so you can break the coupling by using setTimeout. It is a bit of hack but seems to work.

$effect(() => {
  let instance;
  setTimeout(() => {
    instance = mount(Popup, {target: document.body})
  })

  return () => {
    if (instance)
      unmount(instance, {outro: true})
  }
})

[Serator]

Hey @brunnerh. Yeah, that's right, it came as a surprise to me too. I tried your solution. Thankfully, it doesn't pull a lot of changes and this hack seems to work. :) Thanks, you saved my day!

Do you think I should add an issue on this?

[brunnerh]

Sounds like a good idea, a built-in way of detaching the lifecycle would be preferable.

[Serator]

Yeah, thanks. Then I will add an issue and, for now, leave this discussion open.

[Serator]

#15776