如何将含$符号的JS多边形动画代码移植到Svelte组件？

以下是将原 jQuery/GSAP 动画移植到 Svelte 的完整代码，解决了 $ 符号冲突问题并移除了 jQuery 依赖：

<script>
  import { onMount } from 'svelte';
  import gsap from 'gsap';

  // 绑定SVG元素，实现组件内元素的范围选择
  let bgElement;

  onMount(() => {
    // 选择组件内SVG下的所有polygon元素（无需jQuery）
    const polygons = bgElement.querySelectorAll('polygon');

    const ANIM = {
      duration: 0.6,
      stagger: 0.005,

      from: {
        opacity: 0,
        scale: 0,
        transformOrigin: 'center center',
        force3D: true
      },

      to: {
        opacity: 1,
        scale: 1,
        // GSAP 3 使用字符串形式的缓动函数（若用GSAP 2则保留Elastic.easeInOut）
        ease: 'elastic.inOut',
        force3D: true
      }
    };

    // 初始化GSAP时间线（GSAP 3用gsap.timeline替代TimelineMax）
    const timeline = gsap.timeline({
      delay: 0,
      repeat: 0
    });

    // 对多边形执行 stagger 动画
    timeline.staggerFromTo(polygons, ANIM.duration, ANIM.from, ANIM.to, ANIM.stagger, 0);

    // 给body添加loaded类（原生JS替代jQuery）
    document.body.classList.add('loaded');
  });
</script>

<svg class="bg" viewBox="0 0 100 100" preserveAspectRatio="none" bind:this={bgElement}>
  <!-- 粘贴原Codepen中所有的polygon元素 -->
  <polygon points="0 0, 100 0, 100 100"/>
  <polygon points="0 0, 0 100, 100 100"/>
  <!-- 补充剩余的polygon元素 -->
</svg>

<style>
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: #2c3e50; /* 匹配原设计的背景色 */
  }

  body {
    opacity: 0;
    transition: opacity 0.3s ease;
    margin: 0;
    padding: 0;
  }

  body.loaded {
    opacity: 1;
  }
</style>

核心修改说明 #

• 移除jQuery依赖：用Svelte的onMount生命周期钩子替代$(function())，所有DOM操作改用原生JS实现
• 解决$符号冲突：将原变量$polygons重命名为polygons——Svelte中$是响应式存储和语句的保留符号，不能用作变量前缀
• 范围化元素选择：通过bind:this绑定SVG元素，仅选择组件内部的多边形，避免全局DOM选择的潜在问题
• GSAP语法适配：GSAP 3版本使用gsap.timeline()替代TimelineMax，缓动函数改用字符串形式；若仍使用GSAP 2，可还原为new TimelineMax()和Elastic.easeInOut（需导入EasePack）
• 原生JS添加类名：用document.body.classList.add('loaded')替代jQuery的$('body').addClass('loaded')

Svelte REPL 运行步骤 #

1. 在REPL的「Dependencies」标签添加gsap依赖
2. 将原Codepen中所有polygon元素复制到组件的SVG标签内
3. 调整.bg样式中的fill颜色以匹配原设计

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