Svelte中父元素执行退场缩放过渡时如何保持子元素原尺寸？

这个问题我太懂啦！父元素做退场缩放时，子元素会自动继承这个变换效果，所以咱们只要给子元素加个反向缩放，就能抵消父元素的缩放，让子元素稳稳保持原尺寸～

具体可以这么改：

第一步：修改退场过渡函数，传递缩放比例给子元素 #

我们在父元素的过渡CSS里新增一个CSS变量，把当前的缩放比例t传递下去：

export function rightScaleOut(node, options) {
  let nodeTransform = node.style.transform;

  return {
    delay: options.delay,
    duration: options.duration,
    easing: options.easing,
    css: (t) =>
      `transform: ${nodeTransform} scaleX(${t}); transform-origin: top right; --scale-x: ${t};`,
  };
}

第二步：给子元素添加反向缩放 #

在你的<img>标签里，通过style属性添加反向缩放变换，精准抵消父元素的缩放：

{#if show}
<div
  out:rightScaleOut={{
    delay: 150,
    duration: 400,
    easing: sineInOut,
  }}
  data-title="picture portfolio"
  data-scroll-speed="1"
>
  <img
    on:click={transition}
    on:keydown={transition}
    src="pictures/portfolioPicture/landing.png"
    alt="photography portfolio landing"
    style="transform: scaleX(calc(1 / var(--scale-x))); transform-origin: top right;"
  />
</div>
{#/if}

原理超简单：父元素的scaleX(t)会从原尺寸（t=1）缩到完全消失（t=0），而子元素的scaleX(1/t)会反向放大，两者叠加后，子元素的实际缩放比例就是t * (1/t) = 1，完美维持原大小～

另外要注意子元素的transform-origin要和父元素保持一致（都是top right），这样缩放的原点相同，不会出现子元素错位的情况哦！

备注：内容来源于stack exchange，提问作者Eli-ott