Skip to content
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

Transitions are not triggered for the else of an each-else block #4970

Closed
GrygrFlzr opened this issue Jun 4, 2020 · 3 comments · Fixed by #5179
Closed

Transitions are not triggered for the else of an each-else block #4970

GrygrFlzr opened this issue Jun 4, 2020 · 3 comments · Fixed by #5179
Labels
bug good first issue A small, encapsulated issue, ideal for a new contributor to Svelte to tackle.

Comments

@GrygrFlzr
Copy link
Member

Describe the bug
When using an {#each} {:else} block, the contents of the {:else} block do not trigger transitions.

To Reproduce
https://svelte.dev/repl/132758f597224a71a8cd520793fe100f?version=3.23.0

  1. Click the x buttons to remove items
  2. Observe the lack of intro transition for the each-else upon removing the last item
  3. Reset to observe lack of outro transition for the each-else

Expected behavior
I expect the behavior to match having a separate {#if array.length === 0} block: triggering transitions.

Information about your Svelte project:

  • Your browser and the version: Google Chrome 81.0.4044.138 (Official Build) (64-bit) (cohort: Stable)
  • Your operating system: Windows 10 Version 1909 (OS Build 18363.836)
  • Svelte version: 3.23.0

Severity
Low priority - easy workaround using a separate {#if} block.

@pushkine
Copy link
Contributor

pushkine commented Jun 4, 2020

${each_block_else}.c();
${each_block_else}.m(${update_mount_node}, ${update_anchor_node});

${each_block_else}.c();
${each_block_else}.m(${update_mount_node}, ${update_anchor_node});

@transition_in(${each_block_else}, 1);

I can't rn but you'd just need to insert that line at those two places

<script>
   export let arr = ["a"];
   function foo(node){
        return { tick(t){ node.foo = t; }, duration: 100 }
   }
</script>
{#each arr as v}
    {v}
    {:else}
    <div transition:foo>empty</div>
{/each}
export default {
    test({ component, target, assert, raf }){
       assert.htmlEqual(target.innerHtml, "a");
       component.arr = [];
       assert.htmlEqual(target.innerHtml, "<div>empty</div>");
       raf.tick(50);
       assert.equal(target.querySelector("div").foo, 50);
    }
}

test for it

@Conduitry
Copy link
Member

@gbouteiller
Copy link

Hello @Conduitry ,
I have tried with a simple example but it doesn't seem to work. Maybe I'm doing something wrong : https://svelte.dev/repl/5270fd96846945bba36a1c7a908d8e6b?version=3.29.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug good first issue A small, encapsulated issue, ideal for a new contributor to Svelte to tackle.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants