Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Built-in transitions disable unmount #7996

Closed
yomotsu opened this issue Nov 6, 2022 · 3 comments
Closed

Built-in transitions disable unmount #7996

yomotsu opened this issue Nov 6, 2022 · 3 comments

Comments

@yomotsu
Copy link

yomotsu commented Nov 6, 2022

Describe the bug

A child component with a built-in transition, using a store value for the transition condition will not be unmounted.
(This problem is even worse in svelt-kit. the "+page" instance will not be unmounted and duplicated endlessly)

Workaround:
Use custom transitions instead of built-in transitions.

Screen.Recording.2022-11-07.at.12.35.03.AM.mp4

Reproduction

  1. Open REPL: https://svelte.dev/repl/c5b7ff813f7f452683cf49740a7f8323?version=3.52.0
  2. Press the page1 button. Confirm "page1 contents" will be mounted.
  3. Press the page2 button. Confirm "page1 contents" will be unmounted, and "page2 contents" will be mounted.
  4. Press the page1 button again. Confirm "page2 contents" will not be unmounted, and "page1 contents" will be mounted.

Logs

No response

System Info

System:
    OS: macOS 12.6
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 5.52 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.anyenv/envs/nodenv/versions/16.17.1/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.anyenv/envs/nodenv/versions/16.17.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Chrome Canary: 86.0.4196.0
    Firefox: 106.0.1
    Safari: 16.0
    Safari Technology Preview: 16.4
  npmPackages:
    svelte: ^3.52.0 => 3.52.0

Severity

annoyance

@eltigerchino
Copy link
Member

A workaround is to add local to the transition such as <div transition:fade|local>

I've personally come across this problem many times and seen others report the same problem. Perhaps some kind of change would be good to prevent this.

@CodingWill0
Copy link

Seems like Svelte has always had issues with transitions. I confirm I had this double onMount issue after a native Svelte goto method and was fixed adding local directive. Given that local directive has been a fix to multiple Svelte issues in the past related to transitions, maybe it should become the default behaviour of transitions. #6812

@yomotsu
Copy link
Author

yomotsu commented Nov 15, 2022

@s3812497 @CodingWill0
Thanks for the workaround, and the link for the existing issue.

Seems this report is duplicated of #6812.
Let me close this in favor of that.

@yomotsu yomotsu closed this as completed Nov 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants