如何在Svelte中实现仅scaleX的元素退出过渡效果？

Svelte默认的scale过渡会同时缩放X、Y轴，要实现仅X轴从1缩放到0的退出效果，你可以自定义过渡函数，通过控制CSS的transform: scaleX()属性来实现。

步骤1：定义自定义过渡函数 #

在组件的JS部分导入Svelte的transition模块，然后创建专属的X轴缩放过渡函数：

<script>
  import { transition } from 'svelte';
  let show = true;

  // 自定义X轴缩放退出过渡
  function scaleXOut(node, { duration = 300 }) {
    return {
      duration,
      css: t => `transform: scaleX(${t});`,
      // 若需要同步淡出，可修改为：
      // css: t => `transform: scaleX(${t}); opacity: ${t};`
    };
  }

  // 注意：避免函数名与Svelte的transition模块冲突，建议重命名
  function toggleShow() {
    show = !show;
  }
</script>

步骤2：替换默认过渡 #

把模板里的out:scale换成自定义的out:scaleXOut即可：

{#if show}
  <div out:scaleXOut={{duration: 1000}} data-title="picture portfolio" data-scroll-speed="1">
    <img
      on:click={toggleShow}
      on:keydown={toggleShow}
      src="pictures/portfolioPicture/landing.png"
      alt="photography portfolio landing"
    />
  </div>
{/if}

原理说明 #

• 退出过渡中，函数的t值代表进度：过渡开始时t=1，结束时t=0，通过scaleX(${t})实现从原尺寸到X轴完全收缩的效果。
• 可通过调整duration参数控制过渡时长，也可添加其他CSS属性（如opacity）丰富过渡表现。

内容的提问来源于stack exchange，提问作者Eli-ott