Svelte/TS中使用forEach循环修改元素样式不生效问题求助

嘿，我来帮你排查下这个气泡动画的问题～ 你代码里其实有两个关键问题导致样式修改没效果，咱们一步步来解决：

问题1：动画启动时机太早，DOM元素还没绑定到数组里 #

你在组件初始化时就直接调用了moveBubbles()，但这时候Svelte还没完成#each循环的DOM渲染，bind:this={bubbles[i]}还没把气泡元素塞进bubbles数组里——也就是说，第一次执行bubbles.forEach()的时候，数组是空的，自然不会有任何元素被修改。

问题2：样式字符串里多了多余的分号 #

你写的"vh;"和"vw;"里的分号是多余的！给style属性赋值时，直接写"XXvh"就可以，带分号会让浏览器把整个值当成无效的样式，就算元素存在，样式也不会生效。

修复后的完整代码 #

<script lang="ts">
    import { onMount } from 'svelte';
    // 提前初始化对应长度的数组，避免索引越界
    let bubbles: HTMLDivElement[] = new Array(15);
    const ballAmount: number = 15;

    function moveBubbles(): void {
        bubbles.forEach((element) => {
            // 去掉样式字符串里的分号
            element.style.top = `${Math.round(Math.random() * 100)}vh`;
            element.style.left = `${Math.round(Math.random() * 100)}vw`;
        });
        setTimeout(moveBubbles, 15000);
    }

    // 等组件挂载完成、DOM元素渲染好后再启动动画
    onMount(() => {
        moveBubbles();
    });
</script>

<div class="bubbles">
    <div class="circles">
        {#each {length: ballAmount} as _, i}
            <div bind:this={bubbles[i]} class="bubble" style="width: {Math.random()*25}vw;">
                <!-- 这里可以放气泡的内容 -->
            </div>
        {/each}
    </div>
</div>

额外调试小技巧 #

以后遇到类似问题，可以在moveBubbles函数里加一句console.log(bubbles)，看看数组里有没有实际的DOM元素——如果打印出来是空数组或者全是undefined，那大概率是元素还没渲染完成就执行了操作。

备注：内容来源于stack exchange，提问作者SuperSIlly2