Не могу использовать `svelte / animate`, чтобы элемент списка вылетел в заголовок - PullRequest
Новая
       10

Не могу использовать `svelte / animate`, чтобы элемент списка вылетел в заголовок

0 голосов
/ 05 июня 2019

Я пытаюсь найти материал в стиле дизайна материала, в котором название локации будет влетать в заголовок.Кажется, что Svelte не может понять, что две вещи связаны между собой.

demo: https://svelte.dev/repl/865750b1ffb642f59d317747bd9f3534?version=3.4.4

По сути, я пытался заставить его работать, используя список местоположений, такой какитак: 

     {#each visibleLocations as location (location.id)}
        <div
          on:click={() => (selectedLocation = location)}
          class="location"
          animate:flip
          out:send={{ key: location.id }}
          in:receive={{ key: selectedLocation.id }}>
          <div class="name"> {location.name} </div>
        </div>
      {/each}

Тогда у меня был заголовок, который был похож на это.Обратите внимание, что мне пришлось обернуть его в каждый блок, чтобы компилятор позволил мне сделать это.Естественно, это заставляет меня думать, что я делаю что-то немного не так 

    {#each selectedLocaitonList as chosenLocaiton (chosenLocaiton.id)}
        <div
          class="header"
          animate:flip
          in:send={{ key: chosenLocaiton.id }}
          out:receive={{ key: chosenLocaiton.id }}>
          {#if chosenLocaiton.id}
            <button on:click={() => (selectedLocation = { id: null })}>◀️</button>
             {chosenLocaiton.name}
          {:else}Pick a Location near you{/if}
        </div>
      {/each}

Может быть, это то, что selectedLocation не понимает, что это то же самое?Я не уверен, как это выяснить, я надеялся, что это будет через ID.

Ответы [ 2 ]

2 голосов
/ 05 июня 2019

in всегда должен быть связан с receive, а out всегда должен быть связан с send; in:send всегда даст странные результаты. У вас также есть несоответствие между местами здесь: 

out:send={{ key: location.id }}
in:receive={{ key: selectedLocation.id }}

Они оба должны быть одинаковыми.

Директива animate предназначена для переупорядочения элементов в пределах списка - поскольку в этом случае первый список всегда идет от [x] до [y], а второй всегда идет от [] до [x, y, z] нет общих элементов для анимации, так что это неправильное место для использования этой директивы.

При использовании crossfade отправленные / полученные элементы должны быть одинакового размера, и в идеале они должны выглядеть хорошо, когда расположены друг над другом (т.е. вводить в том же месте относительно ограничивающего прямоугольника элемента и т. Д.). Здесь элемент <button> делает вещи разных размеров.

Другими словами, что-то вроде этого: https://svelte.dev/repl/f4386ec88df34e3b9a6b513e19374824?version=3.4.4

К сожалению, визуальный сбой все еще присутствует - поскольку мы используем масштабное преобразование в качестве запасного варианта, макет не изменяется, то есть внешняя граница защелкивается и теряется. вместо того, чтобы изменять размер плавно. Вместо этого мы можем использовать переход slide, но тогда скользящий элемент и элемент перекрестного затухания, кажется, смещаются друг над другом. В любом случае, кажется, что в DOM застрял фантомный элемент и нарушил макет. Я не уверен, является ли это ошибкой Svelte (и если да, то исправима ли она) без дальнейшего расследования, поэтому я поднял проблему: https://github.com/sveltejs/svelte/issues/2957

1 голос
/ 05 июня 2019

Оказывается, если я поменяю местами out и in, тогда все будет работать как положено.Не уверен, почему это так, поэтому желателен лучший ответ.

...