diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte index feb1592..dd99d22 100644 --- a/src/lib/components/transitions/TransitionChild.svelte +++ b/src/lib/components/transitions/TransitionChild.svelte @@ -83,8 +83,6 @@ let enterFromClasses = splitClasses(enterFrom); let enterToClasses = splitClasses(enterTo); - let enteredClasses = splitClasses(entered); - let leaveClasses = splitClasses(leave); let leaveFromClasses = splitClasses(leaveFrom); let leaveToClasses = splitClasses(leaveTo); @@ -111,7 +109,6 @@ enterClasses, enterFromClasses, enterToClasses, - enteredClasses, (reason) => { isTransitioning = false; if (reason === Reason.Finished) dispatch("afterEnter"); @@ -122,7 +119,6 @@ leaveClasses, leaveFromClasses, leaveToClasses, - enteredClasses, (reason) => { isTransitioning = false; @@ -166,7 +162,9 @@ // This is not in the base headless UI library, but is needed to prevent re-renders during the transition // from blowing away the transition classes - $: classes = isTransitioning ? container?.className : $$props.class; + $: classes = isTransitioning + ? container?.className + : `${$$props.class} ${entered}`;
diff --git a/src/lib/utils/transition.ts b/src/lib/utils/transition.ts index 60f9dd6..e7b8c2e 100644 --- a/src/lib/utils/transition.ts +++ b/src/lib/utils/transition.ts @@ -62,13 +62,12 @@ export function transition( base: string[], from: string[], to: string[], - entered: string[], done?: (reason: Reason) => void ) { let d = disposables(); - let _done = done !== undefined ? once(done) : () => {}; + let _done = done !== undefined ? once(done) : () => { }; - removeClasses(node, ...entered); + removeClasses(node); addClasses(node, ...base, ...from); d.nextFrame(() => { @@ -78,7 +77,6 @@ export function transition( d.add( waitForTransition(node, (reason) => { removeClasses(node, ...to, ...base); - addClasses(node, ...entered); return _done(reason); }) ); @@ -88,7 +86,7 @@ export function transition( // the node itself will be nullified and will be a no-op. In case of a full transition the classes // are already removed which is also a no-op. However if you go from enter -> leave mid-transition // then we have some leftovers that should be cleaned. - d.add(() => removeClasses(node, ...base, ...from, ...to, ...entered)); + d.add(() => removeClasses(node, ...base, ...from, ...to)); // When we get disposed early, than we should also call the done method but switch the reason. d.add(() => _done(Reason.Cancelled));