Svelte过渡问题：图片全屏放大无原元素残留及平滑过渡方案问询

方案1：单元素CSS过渡（最简洁） #

直接通过切换CSS类控制图片的尺寸、定位，用原生CSS过渡实现动画，全程只有一个元素，彻底避免双元素同步问题。

<script>
  let isFullscreen = false;
  const toggleFullscreen = () => isFullscreen = !isFullscreen;
</script>

<style>
  .image {
    width: 200px;
    height: auto;
    cursor: pointer;
    /* 配置过渡曲线，可根据需求调整 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
  }

  .image.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* 可选：contain保持图片完整，cover铺满全屏 */
    object-fit: contain;
    z-index: 10;
  }
</style>

<img 
  src="your-image-url.jpg" 
  class="image {isFullscreen ? 'fullscreen' : ''}"
  on:click={toggleFullscreen}
  alt="可放大图片"
/>

优势：无需额外过渡逻辑，CSS原生动画性能优异，视觉上完全是同一个元素被放大/缩小，不会出现原元素残留或瞬间恢复的问题。

方案2：Svelte Flip动画（自动状态过渡） #

利用Svelte内置的flip动画，自动计算元素初始与目标状态的位置、尺寸差值，生成平滑过渡，适合复杂布局场景。

<script>
  import { flip } from 'svelte/animate';
  let isFullscreen = false;
</script>

<style>
  .image {
    cursor: pointer;
    position: relative;
    z-index: 1;
    width: 200px;
    height: auto;
  }

  .image.fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    z-index: 10;
  }
</style>

<img 
  src="your-image-url.jpg"
  class={isFullscreen ? 'fullscreen' : ''}
  animate:flip={{ duration: 300, easing: cubic-bezier(0.4, 0, 0.2, 1) }}
  on:click={() => isFullscreen = !isFullscreen}
  alt="可放大图片"
/>

优势：无需手动计算transform或定位参数，Svelte自动处理状态过渡，代码极简，动画流畅度高。

方案3：双元素同步过渡（适配原有过渡逻辑） #

如果必须保留原有的双元素（原图片+放大层）实现方式，可通过CSS变量同步过渡进度，解决原元素opacity瞬间恢复的问题：

1. 给原图片添加CSS过渡和变量绑定：

.source-image {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: var(--source-opacity, 1);
}

2. 修改过渡函数，通过CSS变量同步t值：

function zoom(node, { sourceElement }) {
  const rect = sourceElement.getBoundingClientRect();
  return {
    css: (t) => {
      // 同步原元素透明度
      sourceElement.style.setProperty('--source-opacity', 1 - t);
      return `
        position: fixed;
        z-index: 10;
        top: ${rect.top}px;
        left: ${rect.left}px;
        width: ${rect.width}px;
        height: ${rect.height}px;
        transform: scale(${t * (window.innerWidth / rect.width)});
        opacity: ${t};
      `;
    },
    done: () => {
      sourceElement.style.removeProperty('--source-opacity');
    }
  };
}

function zoomOut(node, { sourceElement }) {
  const rect = sourceElement.getBoundingClientRect();
  return {
    css: (t) => {
      // 还原时同步原元素透明度
      sourceElement.style.setProperty('--source-opacity', t);
      return `
        position: fixed;
        z-index: 10;
        top: ${rect.top}px;
        left: ${rect.left}px;
        width: ${rect.width}px;
        height: ${rect.height}px;
        transform: scale(${t * (window.innerWidth / rect.width)});
        opacity: ${t};
      `;
    },
    done: () => {
      sourceElement.style.removeProperty('--source-opacity');
    }
  };
}

优势：兼容原有双元素逻辑，通过CSS变量实现过渡进度同步，解决还原时opacity瞬间恢复的问题。

内容的提问来源于stack exchange，提问作者munHunger