Bug > Transition out / slide uses the OLD height from transition in...

[oodavid]

Describe the bug

The REPL is best, here's my best description

When using transition:slide, the transition OUT will use the height calculated for the IN transition, even if the element has since changed size. This causes a jump in the OUT animation.

Reproduction

https://svelte.dev/repl/5744add750c14629bbd0494df7ce0367?version=3.53.1

Logs

No response

System Info

Replicatable with REPL


  System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 64.07 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.94
    Edge: 107.0.1418.68
    Firefox: 105.0.1
    Safari: 15.4
  npmPackages:
    svelte: ^3.46.0 => 3.53.1

Severity

annoyance

[Prinzhorn]

https://github.com/sveltejs/svelte/search?q=slide+height&type=issues https://github.com/sveltejs/svelte/issues/4831

[oodavid]

Cheers.

I'd spotted #4831, but this comment made me think the issue was fixed and I was seeing a regression.

Happy to close, merge or comment. Not sure how we do things here :)

[Prinzhorn]

I'd spotted #4831, but this comment made me think the issue was fixed and I was seeing a regression.

In the future please link related issues and other materials you've found during your search. This avoids duplicate work on the maintainers' end (I comment duplicate issue refs on roughly 20% to 30% of all issues that I triage). This is a duplicate. If you follow the PR in the comment you've linked you'll find that the PR is closed and was never merged. Hence why the issue is still open, it has not been fixed from what I can tell.

Not sure how we do things here :)

No worries, I don't think anyone knows.

[oodavid]

In the future please link related issues and other material you've found during your search. This avoids duplicate work on the maintainers' end (I comment duplicate issue refs on roughly 20% to 30% of all issues that I triage). This is a duplicate.

That's good advice. Sorry for the duplication.

If you follow the PR in the comment you've linked you'll find that the PR is closed and was never merged. Hence why the issue is still open, it has not been fixed from what I can tell.

Fab. That might make a good first-fix for me. Will see if I can carve out some time for that.

[AntonNevsgodov]

Until this issue is fixed, explicitly setting slide to both in and out transitions feels like a good workaround. If you do it like this, the new height is calculated before both transitions.

<div
  in:slide={{ duration: 100 }}
  out:slide={{ duration: 100 }}
/>

Edit: I just found that this workaround was already described here https://github.com/sveltejs/svelte/issues/6850#issuecomment-1069235505