Fix entered styles on Transitions

Broke this when I started manually managing classes.
This commit is contained in:
Ryan Gossiaux
2021-12-18 15:35:53 -08:00
parent ea87a75d35
commit 2d6bd4658e
2 changed files with 6 additions and 10 deletions

View File

@@ -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}`;
</script>
<div bind:this={container} {...$$restProps} class={classes}>

View File

@@ -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) : () => { };
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));