Svelte переход между двумя элементами "прыжки" - PullRequest
Новая
       6

Svelte переход между двумя элементами "прыжки"

0 голосов
/ 23 января 2020

Я люблю Svelte, но я застрял на чем-то, основанном на c (хотя это всего лишь косметика c). Следующий код должен плавно переходить между двумя элементами, но вместо этого он «прыгает» - очевидно, освобождая место для входящего элемента до его прибытия.

Проблема похожа на этот , который Rich Харрис отметил, что несколько лет назад, но я не вижу, чтобы решение было реализовано. Все примеры на сайте учебного пособия Svelte содержат только один элемент.

Вот базовая c разметка / код: 

{#if div1}
    <div 
      in:fly={{ x: 100, duration: 400, delay: 400 }}
      out:fly={{ x: 100, duration: 400 }}>Div 1</div>
{:else}
    <div 
      in:fly={{ x: 100, duration: 400, delay: 400 }}
      out:fly={{ x: 100, duration: 400 }}>Div 2</div>
{/if}

<button on:click={()=>{ div1 = !div1}}>Switch</button>

Рабочий эквивалент в Vue будет: 

<transition name="fly" mode="out-in">
    <div v-if="div1">Div 1</div>
    <div v-else>Div 2</div>
</transition>

Вот пример Code Sandbox . Вы можете увидеть кнопку спрыгнуть вниз, чтобы освободить место для нового элемента. Я добавил задержку перехода «в», равную 400 (я знаю, что это значение по умолчанию, но я хотел установить его явно для ясности). Задержка должна позволить первому элементу перейти перед переходом следующего, как отмечено в первой ссылке (то, что Харрис назвал «хакерским использованием задержки») и предлагает здесь .

Я также попытался явно установить элемент outro'd в position: absolute, чтобы он не занимал место. Вот (все еще не работает должным образом) пример . Кажется, немного не элегантно, даже если это работает. По какой-то причине переход переопределяет установку класса, который устанавливает положение: абсолютное.

Любая помощь очень ценится!

ОБНОВЛЕНИЕ: Я получил желаемый эффект с этим кодом . Здесь я скопировал и изменил переход мухи Svelte, чтобы получить дополнительный параметр - «position», который можно установить как «absolute» или «родственник», или как вам угодно. Несколько настроек CSS, чтобы убедиться, что нет никаких странных побочных эффектов (контейнер, установленный в положение: относительный, и установив ширину каждого элемента на 100%, чтобы они не меняли размер). Это работает, но я все еще чувствую, что должен быть менее трудоемкий метод, без изменения переходов Svelte.

1 Ответ

2 голосов
/ 24 января 2020

Я тоже пришел с Vue, аут-ин - это одна вещь, по которой я скучаю по Svelte. Рич Харрис даже признал это до Svelte 3, но, насколько мне известно, никогда не реализовывал исправления.

Проблема с единственным условием, только с задержкой, методом входящего и исходящего перехода, заключается в том, что Svelte создает входящий элемент, когда условие переключается, несмотря на задержку перехода. Вы можете замедлить переходы вниз и проверить инструменты dev, чтобы увидеть это, оба элемента будут существовать, задержка входящего перехода не мешает элементу иметь размер, просто видимость.

Одним из способов решения этой проблемы является то, что Вы сделали с абсолютной позиции, довольно интенсивно и становится образцом. Другой метод - установить абсолютную высоту для контейнера, содержащего перемещаемые элементы, вытянуть все остальное из контейнера (кнопка в вашем примере) и скрыть переполнение , как показано здесь , очень css зависимое и не всегда хорошо работает с определенными макетами.

Последний способ, который я использовал, является более округлым, но так как Svelte имеет событие outroend, которое отправляется после завершения анимации, вы можете добавить переменную для синим или любым другим вашим вторым условием и вставьте блок else if для второго условия (синий здесь) и подключите триггер, чтобы он проверял активную переменную и выключал ее, затем включите другую переменную внутри события outroend как видно здесь вы также можете удалить любую задержку, поскольку длительность становится задержкой.

Из проверки DOM во время переходов кажется, что это единственный способ, когда оба элемента не существуют одновременно потому что они зависят от отдельных условий, я уверен, что т Вот еще более изящные способы добиться этого, но это работает для меня.

...