如何将带有美元符号的JS代码移植到svelte
我试图得到这个动画多角形背景，从代码依赖工作在一个苗条组件。
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');
});我尝试了很多事情，但我似乎无法使它发挥作用，我试着做一个苗条的爬虫来展示我的进步，但这也不起作用。
我认为问题的根源在于不知道如何处理svelte组件的脚本标记中的$。
回答 3
Stack Overflow用户
发布于 2022-09-09 23:55:08
这里的$来自jquery (一个很久以前很流行的库)。
您不需要$(function () {和$('body').addClass('loaded');，因为svelte将为您处理这个问题(基本上是在执行函数之前等待加载页面，并在主体上添加一个已加载的类)。
您可以使用bind:this获得多边形元素的引用(而不是使用$('.bg > polygon'))，然后就可以在onMount函数上触发动画。我不太了解这个TweenMax的东西，我认为你应该使用动画助手在苗条，以重新创造动画。
Stack Overflow用户
发布于 2022-09-10 01:25:25
通常，您应该避免查询DOM，这正是jQuery ( $实用程序)的目的。要获得对Svelte中元素的引用，可以使用bind:this或通过use:应用操作。
如果您真的需要查询DOM，也不一定需要jQuery，因为浏览器现在无论如何都支持查询。
但是如果您需要jQuery，例如使用它的许多插件中的一些，您通常可以直接从它的NPM包导入它，从而避免使用它的全局定义的快捷方式($)。
import jQuery from 'jquery'; // jQuery == $但是，在这个特定的例子中，jQuery是完全不必要的，可以用querySelectorAll代替。
对于动画，也可以直接导入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>添加了一个viewBox来缩小SVG内容。正如前面提到的，jQuery可以被替换如下：
const polygons = node.querySelectorAll('polygon');Stack Overflow用户
发布于 2022-09-10 03:17:25
非常感谢你的回复。根据@httpete的见解，我以一种对svelte更有意义的方式重建了逻辑。
https://svelte.dev/repl/28905c0b02fa43278e77d9adc9b76d44?version=3.50.1
首先，我将多边形的定义重新构建为JSON文件，然后使用每个循环来构造SVG。然后我用了一个纤细的转换来给它动画。动画不是完美的，但工作，请随时评论如何使它看起来更好。再次感谢你的帮助。
https://stackoverflow.com/questions/73668139
复制相似问题
腾讯云开发者
