苗条过渡可以有条件吗？

Question

是否可以在 html 元素

中为苗条过渡添加条件

<script>
let visible = true;
</script>
{#if visible}
    <p
        transition:fly="{{ y: 200, duration: 2000 }}"
    >
        Flies in and out
    </p>
{/if}

喜欢我喜欢的东西

<script>
let visible = true;
let iWantFly = true
</script>

{#if visible}
    <p
        transition:fly:iWantFly="{{ y: 200, duration: 2000 }}"
    >
        Flies in and out
    </p>
{/if}

甚至喜欢

<script>
let visible = true;
let flyType = 'sureThing'
</script>

{#if visible}
    <p
        transition:fly:{flyType === 'sureThing'}="{{ y: 200, duration: 2000 }}"
    >
        Flies in and out
    </p>
{/if}

我知道可以做两个独立的元素，比如

<script>
let visible = true;
let baseEl;
let flyType = 'sureThing'
</script>

{#if visible && flyType === 'sureThing'}
    <p
        bind:this={baseEl}
        transition:fly="{{ y: 200, duration: 2000 }}"
    >
        Flies in and out
    </p>
{/if}
{#if visible && flyType === 'otherThing'}
    <p bind:this={baseEl}>
        Flies in and out
    </p>
{/if}
{#if visible && flyType === 'thisThing'}
    <p 
      bind:this={baseEl}
      transition:fade
    >
        Flies in and out
    </p>
{/if}

但问题是一个是重复代码，两个是我试图绑定到元素，因此在 'flyType' 切换到新元素之间翻转并搞砸了绑定。或者我需要做。定制一个？我是新手，所以还没有这样做，但不想让它过于复杂

回复之前标记为正确的答案似乎无效使用来自@geoffrich 的示例，当从 'no' 字符串开始并切换到是然后可见时，过渡会立即移动

<script>
import { fly } from 'svelte/transition';
    let visible = true;
    let shouldTransition = 'no';
    function toggleTransition(){
      shouldTransition = shouldTransition === 'yes' ? 'no' : 'yes';
    }
</script>
<label><input type='checkbox' bind:checked={visible}> Visible</label>
      <button on:click={toggleTransition}>toggleTransition: {shouldTransition}</button>

{#if visible}
  <p transition:transitionToUse={{ y: 200, duration: 500 }}>Flies in and out</p>
{/if}

Answer 1

Svelte 过渡只是一个函数，因此您可以reactively更改要用于过渡的函数。这是一个例子：

<script>
    import { fly } from 'svelte/transition';
    let visible = true;
    let shouldTransition = true;
    
    // if shouldTransition is false, use a transition function that does nothing
    $: transitionToUse = shouldTransition ? fly : () => {};
</script>

<label><input type='checkbox' bind:checked={visible}> Visible</label>
<label><input type='checkbox' bind:checked={shouldTransition}> Enable transition</label>

{#if visible}
<p transition:transitionToUse={{ y: 200, duration: 500 }}>Flies in and out</p>
{/if}

Answer 2

我刚刚制作了一个有效的自定义过渡

<script>
import { fly } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
function myFly(node, { y, duration }) {
        return {
            duration,
            css: (t, u) => {
        if(shouldTransition === 'yes'){
          const eased = cubicOut(u);
          return `
            transform: translateY(${eased * y}px);
          `
        } else {
          return null
        }
                
            }
        };
    }
    let visible = true;
    let shouldTransition = 'no';
    function toggleTransition(){
      shouldTransition = shouldTransition === 'yes' ? 'no' : 'yes';
    }
</script>
<label><input type='checkbox' bind:checked={visible}> Visible</label>
      <button on:click={toggleTransition}>toggleTransition: {shouldTransition}</button>

      {#if visible}
      <p transition:myFly={{ y: 200, duration: 500 }}>Flies in and out</p>
      {/if}

更新我实际上认为这可能行不通，因为持续时间仍然存在于每个，但我发现使用 in 和 out 过渡，即使对于相同的过渡函数也是如此。这是我的最终代码

<script>
function myFly(node, { y, duration }) {
  return (typeToUse === 'full') ? {
    duration,
    css: (t, u) => {
      const eased = cubicOut(u);
      return `transform: translateY(${eased * y}px);`
    }
  } : null;
}
</script>
<p 
in:myFly={{ y: windowHeight, duration: 600 }}
      out:myFly={{ y: windowHeight, duration: 600 }} >test</p>

苗条过渡可以有条件吗？

Can svelte transition be conditional?

css

conditional-statements

transition

bind

svelte