使用GSAP与svelte

Question

我有困难使用GSAP在我的瘦身项目为基础的网站。我对两个人都比较陌生。我知道svelte有自己的动画库，但我想使用GSAP来实现它的时间线功能。作为一个测试，我试着改变蓝色方块的颜色，但似乎无法使它发挥作用。它要么不改变要么根本不存在。我也安装了GSAP作为依赖项。这是我的App.svelte中的代码：

<script>
    import { gsap } from "gsap";
    gsap.from(".blue", {color: "#8c0", duration: 1});
</script>

<main>
    <div class="blue"></div>
</main>

<style>
  .blue {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

我也试过使用from方法，但在那里也没有运气。任何帮助都会很感激的。

Answer 1

<script>的内容在DOM创建之前运行(因为Svelte通常在代码运行之前不知道需要创建什么DOM )。如果您需要对已经创建的DOM做一些事情，您必须等待它被挂载，这是您使用onMount生命周期函数所做的：

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

    onMount(() => {
        gsap.from(".blue", {color: "#8c0", duration: 1});
    });
</script>

<main>
    <div class="blue"></div>
</main>

<style>
    .blue {
        width: 100px;
        height: 100px;
        color: blue;
        background-color: currentColor;
    }
</style>

(注意:我将background-color更改为使用currentColor，因为动画color没有其他效果。)

在Svelte中，最好不要使用像.blue这样的全局选择器，因为如果您有这个组件的多个实例，GSAP就不会仅仅选择属于这个组件的元素。最好直接传入DOM元素。可以使用绑定:这个获得对元素的引用。

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

    let box;

    onMount(() => {
        gsap.from(box, {color: "#8c0", duration: 1});
    });
</script>

<main>
    <div bind:this={box} class="blue"></div>
</main>

<style>
    .blue {
        width: 100px;
        height: 100px;
        color: blue;
        background-color: currentColor;
    }
</style>

这里的演示。