Переходы Svelte: как сделать входящие "in" Dynami c Переход компонента Svelte дождаться завершения исходящего "out" компонента Svelte до завершения - PullRequest
Новая
       72

Переходы Svelte: как сделать входящие "in" Dynami c Переход компонента Svelte дождаться завершения исходящего "out" компонента Svelte до завершения

1 голос
/ 26 января 2020

По сути, я работаю над проектом слайд-шоу, где каждый «слайд» загружается динамически с помощью <svelte:component this={currentSelection.component} />. Каждый слайд требует пользовательских входных и выходных переходов для каждого компонента в отдельности. Мне бы хотелось, чтобы следующий слайд "ждал", пока текущий слайд завершит переход, однако, как указано в документации svelte:

В отличие от transition :, переходы применяются с in: и out: не являются двунаправленными - переходный процесс будет продолжать «играть» вместе с исходным переходом , а не наоборот, , если блок отменен во время перехода . Если исходящий переход прерван, переходы будут перезапущены с нуля.

Есть ли разумный способ заставить следующий слайд "подождать", пока текущий слайд не будет завершен с его внешним переходом?

Пример игрушки на REPL

Код игрушки, опубликованный для потомков: 

//App.svelte
<script>
    import RedThing from './RedThing.svelte';
    import GreenThing from './GreenThing.svelte';
    import BlueThing from './BlueThing.svelte';

    const slides = [
            RedThing,
            BlueThing,
            GreenThing
    ];
    let currentComponent = 0;
    const prev = () => currentComponent--;
    const next = () => currentComponent++;

</script>

<button on:click={prev}>Prev</button><button on:click={next}>Next</button>
<div>
    <svelte:component this={slides[currentComponent]}/>
</div>


//RedThing.svelte
<script>
    import { fly, slide } from 'svelte/transition';
</script>

<style>
    div { color: red; }
</style>

<div in:fly out:slide>red thing</div>


//GreenThing.svelte
<script>
    import { fade, slide } from 'svelte/transition';
</script>

<style>
    div { color: green; }
</style>

<div in:slide out:fade>green thing</div>

//BlueThing.svelte
<script>
    import { scale, fade } from 'svelte/transition';


</script>

<style>
    div { color: blue; }
</style>

<div in:scale out:fade>blue thing</div>

Редактировать: я должен добавить усложнение - Я веду прохождение компонентов через теги-якоря, которые занимаются созданием / уничтожением компонентов. Другими словами: 

<a href={prev} id="previous-button">Previous</a>
<a href={next} id="next-button">Next</a>

<div>
    <svelte:component this={slides[currentComponent]}/>
</div>

Я не уверен, имеет ли это значение?

Ответы [ 2 ]

1 голос
/ 04 марта 2020

Я знаю, что этой ветке несколько месяцев, вот простое решение. У меня тоже были проблемы с этим. Секрет? Параметр задержки:

REPL 


// RedThing.svelte
<script>
    import { fly, slide } from 'svelte/transition';
</script>

<style>
    div { color: red; }
</style>

<div in:fly="{{delay: 300, duration: 300}}" out:slide="{{duration: 300}}">red thing</div>


// GreenThing.svelte
<script>
    import { fade, slide } from 'svelte/transition';
</script>

<style>
    div { color: green; }
</style>

<div in:slide="{{delay: 300, duration: 300}}" out:fade="{{duration: 300}}">green thing</div>

// BlueThing.svelte
<script>
    import { scale, fade } from 'svelte/transition';
</script>

<style>
    div { background-color: blue; }
</style>

<div in:scale="{{delay: 300, duration: 300}}" out:fade="{{duration: 300}}">blue thing</div>
1 голос
/ 28 января 2020

Я нашел полуработоспособное решение моей проблемы, добавив position: absolute; к каждому контейнеру динамического c компонента. Это работает, потому что переходы добавляют входящий компонент к dom как родственный элемент к старому, прежде чем уничтожить его. Делая положение абсолютным, исходящие и входящие компоненты занимают одну и ту же позицию. Немного потертости заставляет его выглядеть ок . Это не идеальное решение, но его может быть достаточно.

Пример: 

//RedThing.svelte
<script>
    import { fly, slide } from 'svelte/transition';
</script>

<style>
    div { color: red; }
</style>
<div style="position:absolute;" transition:fade={{duration: tweaky}}>
    <div in:fly out:slide >red thing</div>
</div>

//GreenThing.svelte
<script>
    import { fade, slide } from 'svelte/transition';
</script>

<style>
    div { color: green; }
</style>
<div style="position:absolute;" transition:fade={{duration: tweaky}}>
    <div in:slide out:fade >green thing</div>
</div>

Вдохновлено / украдено этим решением для создания более перекрестных переходов между страницами: https://dev.to/buhrmi/svelte-component-transitions-5ie

...