如何在同一个可切换元素上使用两个简洁的过渡？

Question

我有一个输入字段，我想隐藏/显示并通过淡入淡出和幻灯片过渡来实现。我提出了两个例子，但都有各自的缺点，我想知道是否有更优雅的解决方案。

我只需要回答两个问题之一，因为它们都可以解决我的问题。

问题 1：有没有办法为一个转换指令触发多个转换？

问题 2：如何添加一个类，在if 语句将元素放入 DOM后触发普通的 css-transition？

实施例1

Svelte 不允许在同一元素上进行两次转换。因此一种解决方案是嵌套两个元素，如下所示。有没有一种方法可以同时使用 fade 和 slip 来编写自定义过渡transition:myMultiTransition？

{#if active === true}
  <span transition:fade>
    <span transition:slide>
      <input type="text" />
    </span>
  </span>
{/if}

实施例2

在我的另一个解决方案中，我只是使用普通的 css 转换来切换活动类。这里的问题是<input>-field 永远不会离开 DOM。它的高度是 0px，但把它留在那里似乎是错误的。

如何成功地显示输入字段，{#if active === true}然后添加一个触发过渡效果的类？Svelte 似乎添加了应该在元素进入 DOM 之前触发转换的 active-class。

我尝试过以各种组合使用await tick(), onMount,beforeUpdate但没有成功。

当使用 setTimeout 添加延迟的类时，它可以工作 - 但我不喜欢这个解决方案，因为如果时间不准确，它可能会失败，并且我不希望在转换开始之前有延迟。

<span class:{active}>
   <input type="text" />
</span>

<style>
  .active {
     // Normal transition: opacity 1s etc ... 
  }
</style>

REPL

https://svelte.dev/repl/89cb7d26d9484d0193b4bc6bf59518ef?version=3.38.3

Answer 1

您可以创建自己的转换函数：

<script>
    import { cubicOut } from 'svelte/easing';
    let visibleDoubleElements = false;


    function slidefade(node, params) {
        const existingTransform = getComputedStyle(node).transform.replace('none', '');

        return {
            delay: params.delay || 0,
            duration: params.duration || 400,
            easing: params.easing || cubicOut,
            css: (t, u) => `transform-origin: top left; transform: ${existingTransform} scaleY(${t}); opacity: ${t};`
        };
    }
</script>


<label>
    <input type="checkbox" bind:checked={visibleDoubleElements}>
    Svelte transition
</label>

{#if visibleDoubleElements === true}
    <input transition:slidefade type="text" placeholder="Double elements" />
{/if}

REPL： https://svelte.dev/repl/da8880947eff4f32b740a8742d9f817e ?version=3.38.3