Skip to content

[fix] Local transitions from #key blocks #7286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 16, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/compiler/compile/render_dom/wrappers/KeyBlock.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Wrapper from './shared/Wrapper';
import Renderer from '../Renderer';
import Block from '../Block';
import EachBlock from '../../nodes/EachBlock';
import KeyBlock from '../../nodes/KeyBlock';
import create_debugging_comment from './shared/create_debugging_comment';
import FragmentWrapper from './Fragment';
@@ -19,7 +18,7 @@ export default class KeyBlockWrapper extends Wrapper {
renderer: Renderer,
block: Block,
parent: Wrapper,
node: EachBlock,
node: KeyBlock,
strip_whitespace: boolean,
next_sibling: Wrapper
) {
@@ -107,7 +106,7 @@ export default class KeyBlockWrapper extends Wrapper {
}
${this.var} = ${this.block.name}(#ctx);
${this.var}.c();
${has_transitions && b`@transition_in(${this.var})`}
${has_transitions && b`@transition_in(${this.var}, 1)`}
${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
`;

37 changes: 37 additions & 0 deletions test/runtime/samples/key-block-transition-local/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
export default {
props: {
x: false,
y: 1
},

test({ assert, component, target, raf }) {
component.x = true;

let div = target.querySelector('div');
assert.equal(div.foo, undefined);

// play both in and out transition when changed with `{#key}`
component.y = 2;
assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
const [leaving, incoming] = target.querySelectorAll('div');

raf.tick(50);
assert.equal(leaving.foo, 0.5);
assert.equal(incoming.foo, 0.5);

raf.tick(100);
assert.htmlEqual(target.innerHTML, '<div></div>');
assert.equal(leaving.foo, 0);
assert.equal(incoming.foo, 1);

// do not play out transition when removed by `{#if}`
component.x = false;
assert.htmlEqual(target.innerHTML, '');

// do not play in transition when added back with `{#if}`
component.x = true;
assert.htmlEqual(target.innerHTML, '<div></div>');
div = target.querySelector('div');
assert.equal(div.foo, undefined);
}
};
19 changes: 19 additions & 0 deletions test/runtime/samples/key-block-transition-local/main.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script>
export let x;
export let y;
function foo(node, _params) {
return {
duration: 100,
tick: t => {
node.foo = t;
}
};
}
</script>

{#if x}
{#key y}
<div transition:foo|local></div>
{/key}
{/if}