Nested Transitions NOT Honored

[KevinAst]

I believe I have discovered an issue where Nested Transitions are not operating correctly.

Component:

I have a simple TreeView component (see code here).

• Each node in the tree is powered through a recursion on itself (via the <svelte:self> element).

• The expansion state of each node is retained (through a simple ModuleScoped state), so collapsing a parent does not loose the expansion of it's children (when the parent is re-expanded).

• The expansion/contraction of each node is animated through the standard slide svelte transition

Issue:

The issue I am seeing is when you expand a node that has pre-expanded children, the animated transition only occurs at the top-level. Once the top-level transition has completed, the expanded children pop out instantly. In other words, the nested element transition is NOT honored.

To see this issue:

1. expand all nodes in the sample (i.e. all children and grandchildren)

2. collapse the top-level USA node

3. re-expand the top-level USA node

   NOTICE the direct USA children correctly animate, however the grandchildren pop out instantly, once their parent transition is complete.

In contrast, if you expand/collapse the tree one level at a time, the transition animation is correct.

Am I missing something obvious in my code, or is this in fact an issue?

More Research:

I have found references to this topic in older V2 Issues/PRs, however they are all closed/merged. Is this issue thought to be fixed?

• MERGED PR 1451: Nested transitions #1451
• MERGED PR 1448: add skipIntroByDefault compiler option #1448
• CLOSED ISSUE 117: Support for svelte compiler 'cascade' option #117
• CLOSED ISSUE 547: Skip transitions on initial render #547
• CLOSED ISSUE 1495: Nested components cause transitionManager to always be added if nestedTransitions: true #1495
• CLOSED ISSUE 1492: outroing is not defined with nestedTransitions: true #1492

I realize that when dealing with multiple transitions, it can be difficult to generically determine the "right thing to do". This may be a case for driving some compiler directives from the component code itself ... thoughts?

Your help is greatly appreciated!

Thanks so much for such an awesome product, providing reactivity in an extremely simple form!!!

</Kevin>

[dimfeld]

Here's an interesting wrinkle. In Chrome I see the behavior described above. In MacOS Safari 13.1 (Catalina) I see all the nested transitions run, but the positions of elements don't update completely until all the transitions have finished running, so things slide around and a bunch of the elements overlap until they jump to the right place at the end of the transition.

Edit: also I just checked and the changes in #4742 do not appear to fix this.

[KevinAst]

Thanks for you analyses @dimfeld.

I'm wondering if the author of #4742 (@pushkine) might have any insight on this issue?

[pushkine]

it'll be fixed with #4742

[KevinAst]

WowZee ... Very Nice ... thanks for all your hard work @pushkine!!

[tiemyshoe]

Hey broskis, broettes, etc.

Are there any updates on this issue?—seeing as #4742 and #4999 are substantial and therefore not likely to be merged in the short term.

I'd break out the specific logic and PR to fix this hanky panky janky myself, but I'm only a Google expert in HTML. cc @pushkine

Thanks fam! ✌️♥️ & BLM

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sooxt98]

wow i finally found the exact issue, due to this i have to use conditional inline style to add scope effect

[Oreilles]

Just facing the same issue. It's a real shame that @pushkine 's work didn't end up pulled, although I completely understand the maintainers reaction considering the size of the PR. Hopefully someone will find time and motivation to make it work.

[Oreilles]

Here's a REPL to replicate the issue: https://svelte.dev/repl/df7aa3512eef4dfc948212a3141c1556?version=3.53.1

The issue seems to be that the slide transition function calculating the element's height is called before the second level children have been added to the the DOM. For the transitions to work correctly, they should only be called after all the child elements have been added.