苗条的过渡可以是有条件的吗？答案

【问题标题】：Can svelte transition be conditional?苗条的过渡可以是有条件的吗？
【发布时间】：2021-09-09 18:17:21
【问题描述】：

是否可以在 html 元素中为纤细的过渡添加条件

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

像 idk 之类的东西

<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 中的示例，从“否”字符串开始并切换到“是”，然后可见过渡立即移动

<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}

【问题讨论】：

标签： css conditional-statements transition bind svelte

【解决方案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}

【讨论】：

我遇到了这个问题。使用已更改的条件不起作用$: transitionToUse = typeToUse === 'full' ? fly : () => {}; 当 typeToUse 以“其他”开始时，我在第一次转换不起作用时将其更改为“完整”，但在我将类型更改为其他内容之前，其余的都可以返回第一个可见性关闭不会淡出它只是消失没有过渡
我更新了原始帖子，以回应这不能完全发挥作用

【解决方案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}

更新我实际上认为这可能不起作用，因为每个持续时间仍然存在，但我发现使用输入和输出转换，即使对于相同的转换功能也有效。这是我的最终代码

<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>

【讨论】：