Fix transitioning away
Fixes #17 The root problem here, which took me ages to find, was that `state` should not be reactive. It should only be set once the child has finished, via the nesting context.
This commit is contained in:
@@ -140,15 +140,17 @@
|
||||
}
|
||||
|
||||
let _cleanup = null;
|
||||
$: if (mounted) {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
$: {
|
||||
if (mounted) {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
}
|
||||
_cleanup = executeTransition(
|
||||
$transitionContext.show,
|
||||
$transitionContext.appear
|
||||
);
|
||||
initial = false;
|
||||
}
|
||||
_cleanup = executeTransition(
|
||||
$transitionContext.show,
|
||||
$transitionContext.appear
|
||||
);
|
||||
initial = false;
|
||||
}
|
||||
|
||||
setContext(NESTING_CONTEXT_NAME, nesting);
|
||||
@@ -164,5 +166,7 @@
|
||||
</script>
|
||||
|
||||
<div bind:this={container} {...$$restProps}>
|
||||
<slot />
|
||||
{#if state === TreeStates.Visible}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -120,23 +120,36 @@
|
||||
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
|
||||
$: shouldShow = (() => {
|
||||
function computeShow(
|
||||
show: boolean,
|
||||
openClosedState: State | undefined
|
||||
): boolean {
|
||||
if (show === null && openClosedState !== undefined) {
|
||||
return match($openClosedState, {
|
||||
return match(openClosedState, {
|
||||
[State.Open]: true,
|
||||
[State.Closed]: false,
|
||||
});
|
||||
}
|
||||
|
||||
return show;
|
||||
})();
|
||||
|
||||
$: if (shouldShow !== true && shouldShow !== false) {
|
||||
throw new Error(
|
||||
"A <Transition /> is used but it is missing a `show={true | false}` prop."
|
||||
);
|
||||
}
|
||||
$: state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
|
||||
|
||||
let shouldShow = computeShow(
|
||||
show,
|
||||
openClosedState !== undefined ? $openClosedState : undefined
|
||||
);
|
||||
$: {
|
||||
shouldShow = computeShow(
|
||||
show,
|
||||
openClosedState !== undefined ? $openClosedState : undefined
|
||||
);
|
||||
if (shouldShow !== true && shouldShow !== false) {
|
||||
throw new Error(
|
||||
"A <Transition /> is used but it is missing a `show={true | false}` prop."
|
||||
);
|
||||
}
|
||||
}
|
||||
let state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
|
||||
|
||||
let nestingBag: Writable<NestingContextValues> = writable();
|
||||
nestingBag.set(
|
||||
|
||||
Reference in New Issue
Block a user