+ fades in and out only when y changes +
+ + ++ fades in and out when x or y change +
+ + {/if} +{/if} +``` + +> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs#run-time-client-side-component-api) and marking the transition as `global`. ##### Transition parameters @@ -1153,24 +1180,6 @@ An element with transitions will dispatch the following events in addition to an {/if} ``` ---- - -Local transitions only play when the block they belong to is created or destroyed, *not* when parent blocks are created or destroyed. - -```sv -{#if x} - {#if y} -- fades in and out when x or y change -
- -- fades in and out only when y changes -
- {/if} -{/if} -``` - #### in:*fn*/out:*fn* @@ -1181,6 +1190,12 @@ in:fn in:fn={params} ``` ```sv +in:fn|global +``` +```sv +in:fn|global={params} +``` +```sv in:fn|local ``` ```sv @@ -1194,6 +1209,12 @@ out:fn out:fn={params} ``` ```sv +out:fn|global +``` +```sv +out:fn|global={params} +``` +```sv out:fn|local ``` ```sv diff --git a/src/compiler/compile/nodes/Transition.js b/src/compiler/compile/nodes/Transition.js index 8b8e68682a71..1da4d6a7d51e 100644 --- a/src/compiler/compile/nodes/Transition.js +++ b/src/compiler/compile/nodes/Transition.js @@ -28,7 +28,7 @@ export default class Transition extends Node { this.name = info.name; component.add_reference(/** @type {any} */ (this), info.name.split('.')[0]); this.directive = info.intro && info.outro ? 'transition' : info.intro ? 'in' : 'out'; - this.is_local = info.modifiers.includes('local'); + this.is_local = !info.modifiers.includes('global'); if ((info.intro && parent.intro) || (info.outro && parent.outro)) { const parent_transition = parent.intro || parent.outro; component.error( diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.js b/src/compiler/compile/render_dom/wrappers/Element/index.js index 6af5ed0c74ba..687741d21afe 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.js +++ b/src/compiler/compile/render_dom/wrappers/Element/index.js @@ -422,10 +422,10 @@ export default class ElementWrapper extends Wrapper { `); } if (this.child_dynamic_element_block.has_intros) { - block.chunks.intro.push(b`@transition_in(${this.var});`); + block.chunks.intro.push(b`@transition_in(${this.var}, #local);`); } if (this.child_dynamic_element_block.has_outros) { - block.chunks.outro.push(b`@transition_out(${this.var});`); + block.chunks.outro.push(b`@transition_out(${this.var}, #local);`); } block.chunks.destroy.push(b`if (${this.var}) ${this.var}.d(detaching)`); if (this.node.animation) { diff --git a/test/js/samples/transition-local/input.svelte b/test/js/samples/transition-local/input.svelte index 3f87627c6219..53c9b2b03ed8 100644 --- a/test/js/samples/transition-local/input.svelte +++ b/test/js/samples/transition-local/input.svelte @@ -7,6 +7,6 @@ {#if x} {#if y} -wheeee
loading...
+loading...
{:then value}{value}
{:catch error} diff --git a/test/runtime/samples/transition-js-await-block/main.svelte b/test/runtime/samples/transition-js-await-block/main.svelte index 0a0bb0005d7a..8e7a381fb2ca 100644 --- a/test/runtime/samples/transition-js-await-block/main.svelte +++ b/test/runtime/samples/transition-js-await-block/main.svelte @@ -12,7 +12,7 @@ {#await promise} -loading...
+loading...
{:then value}{value}
{:catch error} diff --git a/test/runtime/samples/transition-js-each-block-intro/main.svelte b/test/runtime/samples/transition-js-each-block-intro/main.svelte index d19924af61c3..5685232b7cef 100644 --- a/test/runtime/samples/transition-js-each-block-intro/main.svelte +++ b/test/runtime/samples/transition-js-each-block-intro/main.svelte @@ -12,5 +12,5 @@ {#each things as thing} -