如何将带有美元符号的 JS 代码移植到 svelte

Question

我试图从在一个苗条组件中工作的 codepen 获得这个动画多边形背景。

https://codepen.io/NyX/pen/bEbKZz

$(function () {
  const $polygons = $('.bg > polygon');

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

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


    to: {
      opacity: 1,
      scale: 1,
      ease: Elastic.easeInOut,
      force3D: true } };



  const timeline = new TimelineMax({
    delay: 0,
    repeat: 0
    //repeatDelay: 0.5,
    //yoyo: true
  });


  timeline.staggerFromTo($polygons, ANIM.duration, ANIM.from, ANIM.to, ANIM.stagger, 0);
  //TweenMax.staggerFromTo(polygons, ANIM.duration, ANIM.from, ANIM.to, ANIM.stagger);

  $('body').addClass('loaded');
});

我已经尝试了很多事情，但似乎无法使其正常工作，我尝试制作一个苗条的 repl 来显示我的进度，但这也不起作用。

我认为问题的根源是不知道如何处理 svelte 组件的脚本标签中的 $ 。

谢谢你的时间。

Answer 1

这里的$来自jquery （一个很久以前非常流行的库）。

您不需要$(function () {和$('body').addClass('loaded');因为 svelte 会为您处理（基本上等待您的页面在执行 function 之前加载并添加将 class 装入车身）。

您可以在 svelte 中使用bind:this获取多边形元素的引用（而不是使用$('.bg > polygon') ），然后您可以在onMount function 上触发 animation。 我对这个TweenMax东西不太了解，我认为你应该在 svelte 中使用 animation 助手来重新创建 animation。

Answer 2

通常，您应该避免查询 jQuery（ $实用程序）所用于的 DOM。 要获取 Svelte 中元素的引用，您可以使用bind:this或通过use:应用操作。

如果你真的要查询 DOM，你也不一定需要 jQuery，因为浏览器现在无论如何都支持查询。

但是如果你需要 jQuery，例如使用它的许多插件，你通常可以直接从它的 NPM package 导入它，从而避免使用其全局定义的快捷方式（ $ ）。

import jQuery from 'jquery'; // jQuery == $

但是，在这个特定示例中， jQuery 完全没有必要，可以用querySelectorAll代替。

对于animation，也可以直接导入gsap 。 该代码似乎使用了一个非常旧的版本。 在较新的版本中，您会稍有不同。

在查询 DOM 时，我建议至少使用bind:this或根元素上的操作，这样选择就变得相对，不会意外影响组件之外的任何内容。 （使用bind:this时，您只能在onMount之后访问绑定值。）

使用动作的完整示例：

<script>
    import jQuery from 'jquery';
    import gsap from 'gsap'
    
    function animate(node) {
        const polygons = jQuery(node).find('polygon');
        const ANIM = {
            duration: 0.6,
            stagger: 0.005,
            from: {
                opacity: 0,
                scale: 0,
                transformOrigin: 'center center',
                force3D: true
            },
            to: {
                opacity: 1,
                scale: 1,
                ease: 'elastic',
                force3D: true
            }
        };

        const timeline = gsap.timeline({
            delay: 0,
            repeat: 0,
        });

        timeline.staggerFromTo(polygons, ANIM.duration, ANIM.from, ANIM.to, ANIM.stagger, 0);
    }
</script>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     use:animate
     width="100%" height="100%">
  ...
</svg>

REPL

添加了一个viewBox来缩小 SVG 的内容。 如前所述， jQuery 可以被替换：

const polygons = node.querySelectorAll('polygon');

Answer 3

非常感谢您的回复。 借助@httpete 的见解，我以一种对苗条更有意义的方式重建了逻辑。

https://svelte.dev/repl/28905c0b02fa43278e77d9adc9b76d44?version=3.50.1

首先，我将多边形的定义重建为 json 文件，然后使用 each 循环构造 svg。 然后我使用了一个苗条的过渡来动画它。 animation 并不完美，但可以工作，请随时评论如何使它看起来更好。 再次感谢您的帮助。