Svelte入场过渡完成后，SCSS transition属性失效问题求助

Svelte的in:scale入场过渡会通过内联样式修改元素的transform属性（从scale(0)过渡到scale(1)），过渡结束后Svelte会移除这个内联transform样式。此时浏览器会立即应用SCSS中媒体查询下的transform: translate(...)规则——但因为元素的transform状态是从Svelte过渡后的scale(1)（内联样式）直接切换到SCSS的translate(...)，浏览器会把这两次样式变化合并，不会触发你设置的transition动画，导致元素直接跳转。

提供两种可行的解决方法，根据需求选择：

方法1：给元素设置默认transform初始值 #

在基础样式中给元素添加默认的transform: translate(0, 0)，这样当内联样式移除后，元素会先处于这个初始状态，再过渡到SCSS的目标translate值，触发transition：

> div {
  transition: transform 0.75s ease;
  transform: translate(0, 0); // 添加默认初始值

  @media screen and (min-width: 1025px) {
    @for $i from 1 to 5 {
      &:nth-of-type(#{$i}) {
        @include global.offset(random(750) + px, 0);
      }
    }
  }
}

方法2：利用Svelte的introend事件延迟应用SCSS样式 #

通过Svelte的on:introend事件，在入场过渡结束后给元素添加类名，让SCSS的transform规则只在这个类存在时生效，确保样式变化被transition捕捉：

Svelte代码修改： #

<script>
  import { scale, quadInOut } from 'svelte/transition';
  let showTranslate = false;
</script>

<div
  in:scale={{
    delay: 250,
    duration: 650,
    easing: quadInOut,
  }}
  on:introend={() => showTranslate = true}
  class:translate-ready={showTranslate}
>
  <img src="https://picsum.photos/200" alt="mobile version" />
</div>

SCSS代码修改： #

> div {
  transition: transform 0.75s ease;

  @media screen and (min-width: 1025px) {
    &.translate-ready {
      @for $i from 1 to 5 {
        &:nth-of-type(#{$i}) {
          @include global.offset(random(750) + px, 0);
        }
      }
    }
  }
}

这样，入场过渡结束后才会添加translate-ready类，触发transform从默认状态到目标值的平滑过渡。

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