Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Svelte list crossfade randomly misplaces elements

I have a list which I want to animate so that when an item is selected, it floats to top and the rest fly out. On reselecting the element it floats back to its place and others fly back in.

Using this crossfade demo I was able to produce a pretty solid version:

REPL

However, I noticed that the elements sometimes aren’t returned to their original position and only a subsequent re-animating might fix it. I am pretty sure this is because my crossfade function needs more sophisticated handling (or that I should use just regular transition instead?) but I am unsure how exactly.

<script>
  import { flip } from 'svelte/animate'
  import { writable } from 'svelte/store'
  import { crossfade, fly } from 'svelte/transition'

  const ACTIONS = [
    { key: 'blue' },
    { key: 'green' },
    { key: 'yellow' },
    { key: 'purple' },
    { key: 'orange' },
    { key: 'red' },
  ]
  const selectedAction = writable(null)
  let shownActions = ACTIONS.map(a => a)

  const [send, receive] = crossfade({
    fallback(node, _params) {
      return fly(node, { x: -800, duration: 600 })
    }
  })

  function selectAction(action) {
    if ($selectedAction === action) {
      shownActions = ACTIONS.map(a => a)
      selectedAction.update(v => {
        if (v === action || action === undefined) {
          return null
        } else {
          return action
        }
      })
    } else {
      shownActions = ACTIONS.filter(a => a.key === action)
      selectedAction.update(v => {
        if (v === action || action === undefined) {
          return null
        } else {
          return action
        }
      })
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
</script>

<ul>
{#each shownActions as action (action)}
  <li
    class={`${$$props.class || ''}`}
    animate:flip={{ duration: 600 }}
    in:receive={{ key: action.key }}
    out:send={{ key: action.key }}
  >
    <button on:click={e => selectAction(action.key)}>{action.key}</button>
  </li>
{/each}
</ul>

<style lang="scss">
    ul {
        list-style: none;
    }
    li {
        display: flex;
        margin-bottom: 1rem;
    }
    button {
        margin-right: 1rem;
        padding: 0.5rem 1rem;
    }
</style>
Tags:

2

Answers


  1. 0

    It looks like the issue pops when you are clicking before the animation is over. You could wait for the animation to end using transition events. But there’s also an issue with the position of the elements during the transition. I had better results when using a child div inside li elements and a slide animation on li :

    {#each shownActions as action (action)}
  <li
        in:slide={({deylay: 0, duration: 300})}
        out:slide={({deylay: 600, duration: 300})}
  >
        <div
            class={`${$$props.class || ''}`}
            in:receive={{ key: action.key }}
            out:send={{ key: action.key }}
        >
            <button on:click={e => selectAction(action.key)}>{action.key}</button>
        </div>
  </li>
{/each}

    demo

    Login or Signup to reply.
  2. 0

    Looks like this can be solved by

    • seperating the animate:flip and the transitions on seperate elements. (Since the elements just vanish and don’t move to a different ‘location/container’ the crossfade isn’t needed)
    • Making the <ul> a flex element to prevent ‘collapsing’ of the stack (visible with a longer duration and clicking on a lower element / related question)
    • blocking action while transition is playing

    REPL

    <script>
    import { flip } from 'svelte/animate'
    import { writable } from 'svelte/store'
    import { crossfade, fly } from 'svelte/transition'

    const ACTIONS = [
        { key: 'blue' },
        { key: 'green' },
        { key: 'yellow' },
        { key: 'purple' },
        { key: 'orange' },
        { key: 'red' },
    ]

    let animating = false

    const selectedAction = writable(null)
    let shownActions = ACTIONS.map(a => a)

    function selectAction(action) {
        if(animating === true) return

        if ($selectedAction === action) {
            shownActions = ACTIONS.map(a => a)
            selectedAction.update(v => {
                if (v === action || action === undefined) {
                    return null
                } else {
                    return action
                }
            })
        } else {
            shownActions = ACTIONS.filter(a => a.key === action)
            selectedAction.update(v => {
                if (v === action || action === undefined) {
                    return null
                } else {
                    return action
                }
            })
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        }
    }
</script>

<ul>
    {#each shownActions as action (action)}
        <li
            class={`${$$props.class || ''}`}
            animate:flip={{ duration: 600 }}
            >
            <div
                in:fly={{ x: -800, duration: 600 }}
                out:fly={{ x: -800, duration: 600 }}
                on:introstart={() => animating = true}
                on:outrostart={() => animating = true}
                on:introend={() => animating = false}
                on:outroend={() => animating = false}
                >
                <button on:click={e => selectAction(action.key)}>{action.key}</button>
            </div>
        </li>
    {/each}
</ul>

<style lang="scss">
    ul {
        display: flex;
        flex-direction: column;
        list-style: none;
    }
    li {
        display: flex;
        margin-bottom: 1rem;
    }
    button {
        margin-right: 1rem;
        padding: 0.5rem 1rem;
    }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search