diff --git a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts index 55402b9ff04..6a67f73c629 100644 --- a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts @@ -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}); `; diff --git a/test/runtime/samples/key-block-transition-local/_config.js b/test/runtime/samples/key-block-transition-local/_config.js new file mode 100644 index 00000000000..50400e72b6c --- /dev/null +++ b/test/runtime/samples/key-block-transition-local/_config.js @@ -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, '
'); + 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, '
'); + 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 = target.querySelector('div'); + assert.equal(div.foo, undefined); + } +}; diff --git a/test/runtime/samples/key-block-transition-local/main.svelte b/test/runtime/samples/key-block-transition-local/main.svelte new file mode 100644 index 00000000000..05ed75b7e14 --- /dev/null +++ b/test/runtime/samples/key-block-transition-local/main.svelte @@ -0,0 +1,19 @@ + + +{#if x} + {#key y} +
+ {/key} +{/if} \ No newline at end of file