Fix entered styles on Transitions
Broke this when I started manually managing classes.
This commit is contained in:
@@ -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}>
|
||||
|
||||
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user